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对 本 书 的 觉 誉 


近 几 年 大 前 端 技术 飞速 发 展 ，2015 年 Facebook 推 出 React Native 以 
来 ，Native 与 HIML 5 之 间 的 界线 已 变 得 越 来 越 模糊 ， 而 小 程序 的 强势 
来 袭 更 是 推动 这 类 技术 在 实际 商业 场景 中 的 应 用 。 本 书 将 带领 读者 快 
速 入 门 ， 掌 握 小 程序 开发 技巧 ， 一 起 加 入 小 程序 研发 与 探讨 中 。 


一 一 王楠 ， 百 度 高 级 经 理 


小 程序 是 非常 棒 的 一 款 产 品 ， 写 将 跨 乎 台 研 发 技术 与 微 信 业务 进 
行 完 美的 融合 ， 让 开发 者 在 微 信 环境 中 轻松 开发 出 媲美 原生 体验 的 应 
用 。 大 浪 袭 来 时 ， 卓 立 潮 头 的 永远 是 认 准 风口 的 少数 人 。 


一 一 刘 通 ， 阿 里 技术 专家 


移动 端 和 前 端 拉 术 体系 的 融合 已 成 为 未 来 大 趋势 ， 小 程序 的 横 空 
出 世 无 疑 对 这 类 技术 在 商业 上 的 应 用 起 到 催化 剂 作用 。 本 书 在 第 一 时 
间 给 出 小 程序 实践 思路 ， 让 初学 者 能 快速 入 门 ， 推 荐 大 家 仔细 阅读 ， 
认真 实践 。 


一 一 王 幸 ， 阿 里 技术 专家 


小 程序 是 可 以 轻松 使 用 的 跨 平台 技术 ， 用 炙手可热 的 前 端 技能 
发 出 接近 原生 性 能 的 应 用 。 从 此 ， 你 只 需要 专心 构建 功能 或 者 服务 ， 
无 需 开 发 App， 束 可 以 令 体验 深入 人 心 。 通 过 作者 用 心 写 下 的 这 本 
书 ， 加 入 到 连接 人 和 微 信 的 狂欢 中 来 吧 | 


一 一 陶 氏 ， 腾 讯 高 级 前 端 工程 师 


不 输 原生 的 用 户 体 验 ， 轻 松 的 开发 者 接 入 方式 ， 更 好 的 应 用 平台 
一 一 与 React Native 相 比 ， 小 程序 借助 于 微 信 ， 相 信 将 市 来 一 场 应 用 开 
发 的 变 草 。 现 在 ， 这 本 书 将 带 你 参与 到 这 场 变 草 中 ， 赶 快 加 入 吧 ! 


一 一 杨帆 ， 多 氮 总 监 

小 程序 是 撤 术 驱动 业务 的 典范 ， 它 利用 类 似 React Native、Weex 等 

大 前 病 演 染 技术 ， 完 美 解决 了 开发 者 业务 接 入 的 体验 问题 ， 这 不 茜 让 
每 一 位 技术 从 业者 感到 兴奋 、 目 紧 。 本 书 第 一 时 间 给 予 最 住 实践 案例 


及 学 习 思 路 ， 定 能 让 读者 受益 菲 浅 。 


一 一 刘 鹏 ， 束 东 高 级 工程 师 


能 在 第 一 时 间 看 到 好 友 的 书 ， 感 觉 是 如 此 的 亲切 ， 作 为 一 个 互联 
网 老兵 ， 能 感到 作者 这 么 多 年 来 在 前 端 技术 领域 的 坚持 与 执着 。 本 书 
内 容 浅显 易 仅 ， 有 前 端 基础 的 同学 能 很 快 入 门 ， 布 望 能 对 小 程序 感 兴 
趣 的 开发 者 市 来 一 些 帮 助 。 


= 一 地 WU CEO 


序 一 


2016 年 9 月 ， 微 信和 刚 一 推出 小 程序 ， 行 业内 便 充 满 了 微 信 对 于 App 
生态 的 各 种 猜想 。 媲 美 Native App 上 原生 体验 ， 基 于 微 信 强大 流量 入 
口 和 生态 环境 ， 比 起 之 前 推出 的 轻 应 用 、 直 达 写 等 ， 小 程序 的 未 来 仍 
然 充满 了 无 限 的 想象 力 。 小 程序 的 发 布 ， 对 App 开 发 技术 和 前 端 H5 技 
术 的 应 用 会 产生 重要 的 影响 ， 尤 其 是 对 大 多 数 创 业 公司 而 言 ， 小 程序 
会 让 研发 成 本 更 低 ， 开 发 效率 更 高 ， 产 品 迭 代 更 快 ， 流 量 获取 更 容 
易 。 因 此 随 着 小 程序 的 不 断 成 熟 ， 对 于 未 来 业内 产品 形态 、 流 量 重 构 
可 能 会 掀起 不 小 的 波浪 ， 是 对 新 领域 进行 的 大 胆 尝试 。 


本 书 作 者 李 骏 作为 多 点 生活 的 资深 前 病 染 构 师 ， 曾 束 职 于 阿里 、 
腾讯 等 知名 互联 网 公司 ， 具 有 顶尖 的 前 端 技术 能 力 和 丰富 的 实战 经 
验 ， 在 第 一 时 间 便 投入 到 微 信 小 程序 的 实践 中 。 本 书 可 分 为 3 部 分 ， 第 
一 部 分 作为 基础 革 市 ， 介 绍 了 第 一 个 小 程序 的 搭建 流程 ， 让 大 家 能 快 
速 上 手 ; 同时 对 小 程序 框架 原理 进行 了 详细 介绍 ， 为 后 面 学 习 组 件 、 
API 打 下 基础 。 第 二 部 分 对 小 程序 组 件 、APIT 进 行 介绍 ， 对 组 件 、API 
的 使 用 、 注 意 事项 进行 详细 讲解 ， 并 给 出 示例 代码 。 最 后 一 部 分 精 选 5 
个 由 浅 入 深 的 案例 ， 对 小 程序 研发 进行 实战 讲解 ， 涵 盖 了 实际 项 目 中 
可 能 涉及 的 技术 方案 和 使 用 方法 ， 具 备 很 强 的 实战 意义 。 在 这 本 书 


中 ， 包 含 了 作者 在 电 商 领域 多 年 的 前 端 经 验 总 结 和 对 当前 主流 染 构 的 
思考 ， 硕 望 读 者 们 可 以 从 中 获取 到 目 己 想 要 的 “干货 ”。 


杨 遇 ， 多 点 生活 技术 VP 


2017 年 1 月 于 北京 


邦 


微 信 小 程序 如 约 而 至 ， 在 继 服 务 号 、 订 阅 号 、 企 业 号 之 后 微 信 公 
众 平台 再 一 次 做 出 了 大 胆 竹 试 。 相 对 于 技术 创新 ， 产 品 色彩 和 利益 驱 
动 更 浓厚 。 在 当今 互联 网 时 代 ， 信 息 流动 越 来 越 封闭， 每 个 公司 都 想 
让 信息 、 流 量 只 进 不 出 ， 尽 量 形成 团 环 ， 基 于 封闭 的 信息 努力 寻找 一 
条 留 利之 路 。 基 于 这 个 逻辑 、 依 托 微 信 庞大 的 用 户 量 和 超 强 的 用 户 儿 
性 ， 微 信 将 移动 端 跨 平 台 技术 与 微 信 App 进 行 深度 集合 ， 提 高 体验 的 
同时 提高 开发 效率 。 而 由 于 小 程序 只 能 在 微 信 中 打开 、 分 至 ， 这 使 得 
小 程序 在 技术 层面 和 商业 层面 都 形成 民 好 的 闭环 ， 大 大 提升 了 微 信 的 
苋 争 力 和 抢占 流量 入 口 的 能 


小 程序 在 本 质 上 与 React Native、Weex 做 的 事 大 同 小 异 ， 不 同 的 
是 ， 小 程序 并 不 是 将 WXML 完 全 原生 化 ， 现 阶段 仅仅 是 部 分 原生 化 ， 
大 部 分 泻 染 工作 任 由 WebView 完 成 ， 比 如 地 图 、textarea 等 组 件 的 优 
化 ， 可 以 说 这 种 方式 利用 最 小 的 投入 显著 提高 了 小 程序 的 可 用 性 。 通 
过 高 度 抽象 的 WXML 和 WXSS， 可 以 从 技术 上 通过 限定 一 些 Web 技 术 
子 集 ， 从 而 保障 小 程序 的 性 能 与 体验 ， 而 之 后 小 程序 团队 可 在 不 影响 
开发 者 源码 的 情况 下 ， 随 时 通过 升级 Runtime 与 组 件 、API 不 断 优化 小 
程序 性 能 与 体验 ， 甚 至 完全 演变 为 全 原生 化 泻 染 。 这 种 设计 是 一 种 职 


责 上 的 划分 ， 让 开发 者 更 关注 业务 ， 小 程序 团队 则 负责 解决 性 能 及 放 
层 问题 ， 最 快速 地 形成 一 套 微 信和 内 的 App 生 仿 。 


小 程序 刚 发 布 不 久 ， 本 书 作者 从 实践 角度 分 析 小 程序 研发 技术 并 
给 出 实践 案例 ， 让 大 家 在 最 短 时 间 内 掌握 小 程序 研发 技术 ， 帮 助 大 家 
所 人 IAD 


韩 笑 路 ， 京 东 商 城 技术 总 监 


2017 年 1 月 于 北京 


腹 喇 


目 2016 年 9 月 21 日 微 信 小 程序 公布 以 来 ， 微 信 技 术 群 中 天 于 小 程序 
的 讨论 就 没 间 断 过 ， 这 是 又 一 次 创业 的 好 机 会 ， 尤 其 是 对 中 小 企业 扩 
大 网 络 影 响 力 很 有 利 。 我 们 在 抓紧 时 间 学 习 小 程序 的 过 程 中 ， 总 结 3 
实践 了 小 程序 的 功能 ， 并 和 希望 通过 这 本 书 传达 给 广大 的 读者 。 我 们 在 
编写 过 程 中 正 临 电 商行 业 中 最 忙 的 儿 个 月 ， 双 11、 双 12、 圣 诞 节 、 元 
日 节 等 需求 已 经 堆 莅 如 山 ， 我 和 边 思 昌 天 处 理 公 司 需求 ， 晚 上 编写 书 
籍 ， 几 乎 没有 周末 ， 这 样 坚持 了 几 个 月 终于 完成 本 书 ， 直 至 交 稿 时 才 
如 释 重负 。 


小 程序 刚 发 布 不 入， 很 多 功能 都 还 在 不 断 更 新 中 ， 本 书 内 容 在 官 
方 文档 基础 上 进行 补充 说 明 ， 并 给 出 实践 案例 ， 壬 试 给 出 现 阶 段 尽 可 
能 完善 的 开发 模式 ， 适 合 小 程序 初学 者 入 门 。 在 小 程序 的 学 习 过 程 
中 ， 我 们 做 过 很 多 莹 试 ， 这 里 我 们 仅仅 提出 了 目 己 的 一 些 实现 方案 和 
观点 供 大 家 参考 。 小 程序 整体 推动 还 需要 更 多 开发 者 参与 ， 小 程序 还 
未 正式 公布 前 ， 便 有 很 多 公司 及 个 人 针对 小 程序 研发 过 程 中 的 痛 点 推 
出 了 各 类 三 方 框 架 ， 硕 望 阅 读本 书后 ， 大 家 也 能 提出 目 己 的 想法 ， 积 
极 参 与 小 程序 相关 话题 讨论 ， 推 动 小 程序 研发 方案 优化 与 普及 。 


本 书 内 容 和 组 织 结构 


本 书 内 容 大 致 可 分 为 三 部 分 。 


第 一 部 分 为 基础 部 分 ， 共 3 章 ， 主 要 介绍 小 程序 开发 的 基础 知识 。 


第 1 章 介绍 微 信 小 程序 环境 搭建 、 运 行 第 一 个 小 程序 demo 。 


第 2 章 介绍 小 程序 核心 知识 ， 包 括 整体 框 膝 运行 原理 、 规 则 ， 每 个 


文件 的 作用 ， 以 及 WXML 与 WXSS。 


第 3 章 介 绍 CSS 布 局 基础 ， 讲 解 了 盒子 模型 、 浮 动 、 定 位 以 及 Flex 


布局 。 


第 二 部 分 为 组 件 和 API， 共 2 章 ， 主 要 讲解 小 程序 组 件 、API 相 关 


知识 3 


应 用 ， 


的 代 


第 4 章 介绍 小 程序 组 件 相 关 知 识 ， 主 要 内 容 包括 视图 容 右 、 基 础 组 


` 表单 组 件 、 导 航 、 媒 体 组 件 、 地 图 、 画 布 等 。 


第 5 章 介 绍 小 程序 API 相 关 知识 ， 主 要 内 容 包 括 网 络 、 媒 体 、 文 


` 数据 缓存 、 位 置 、 设 备 、 弄 面 、 开 放 接 口 等 。 


第 三 部 分 为 案例 实践 ， ， 通 过 实际 案例 介绍 如 何 开发 小 程序 
包括 一 些 思 路 和 框架 ， 以 及 部 分 代码 和 实现 技巧 。 


第 6 章 介 绍 如 何 开 发 豆 狼 电影 小 程序 ， 主 要 讲解 一 个 最 简单 小 程序 
码 结构 。 


第 7 章 介绍 如 何 开发 东 考 小 程序 ， 主 要 讲解 如 何 利 用 第 三 方 API 创 
建 小 程序 引用 。 


第 8 革 介 绍 如 何 开 发 打 赏 小 程序 ， 主 要 讲解 小 程序 支付 流程 。 
第 9 章 介绍 如 何 开发 日 程 表 小 程序 。 


第 10 章 介绍 如 何 开发 多 点 商城 ， 主 要 讲解 如 何 架构 一 个 复杂 小 程 
序 项 目 。 


本 书包 含 的 所 有 案例 代码 可 以 到 https://github.com/wxapp-book 下 
载 。 本 书 创作 时 间 较 短 ， 如 有 芷 漏 ， 有 恳请 各 位 读者 径 正 。 
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第 1 章 ” 初 识 小 程序 


微 信 小 程序 上 自 2016 年 9 月 21 日 内 测 以 来 ， 束 引起 广 沁 关 注 ， 越 来 越 
多 的 开发 者 开始 研究 如 何 使 用 它 ， 在 业界 刊 起 了 一 阵 不 小 的 确 风 。 小 
程序 不 仅 在 商业 上 具备 很 大 潜力 ， 同 时 在 技术 上 解决 了 一 套 代码 多 端 
运行 和 动态 发 版 的 两 大 痛 点 ， 用 户 在 微 信 中 扫 一 扫 或 搜 一 下 即 可 打开 
具备 原生 体验 的 应 用 ， 这 给 开发 者 带 来 了 很 大 的 想象 空间 。 小 程序 还 
在 测试 阶段 就 有 大 量 开发 者 尝试 为 其 开发 各 种 框架 ， 其 中 腾讯 云 还 开 
发 了 一 套 微 信 小 程序 解决 方案 (https://www.qcloud.com/solutionm/la.html 
) ， 由 此 可 见 小 程序 在 业界 的 影响 力 非 同 小 可 。 本 章 将 介绍 小 程序 的 
接 入 流程 ， 并 展示 第 一 个 小 程序 的 开发 过 程 ， 使 读者 快速 入 门 ， 简 单 
体验 小 程序 的 开发 流程 。 


按 官方 定义 来 讲 ， 小 程序 是 一 种 不 需要 下 载 安 闭 即 可 使 用 的 应 
用 ， 它 实现 了 应 用 “触手 可 及 ”的 梦想 ， 用 户 扫 一 扫 或 者 搜 一 下 即 可 打 
开 应 用 。 也 体现 了 “用 完 即 走 ” 的 理念 ， 用 户 不 用 担心 是 否 安 装 太 多 应 
用 的 问题 。 应 用 将 无 处 不 在 ， 随 时 可 用 ， 但 又 无 需 安 逆 铝 载 。 


从 技术 角度 来 讲 ， 小 程序 采用 了 类 似 React Native 和 Weex 一 样 的 解 
析 技 术 ， 开 发 者 可 编写 一 套 代 码 在 多 端 运行 (Android 微 信 、iOS 微 信 
和 浏览 器 容器 ) ， 同 时 相 比 公众 号 H5 应 用 ， 小 程序 具备 更 好 的 原生 体 
验 。 严 格 来 讲 ， 小 程序 也 是 需要 下 载 和 安装 的 ， 只 是 由 于 技术 实现 方 
案 以 及 官方 规定 小 程序 包容 量 不 得 超过 1M， 使 得 下 载 、 安 装 (部 署 ) 
过 程 特 别 快 ， 用 户 在 感官 上 察觉 不 到 它 在 安装 而 已 。 为 了 达到 用 完 即 
走 、 人 快速 开发 的 目的 ， 小 程序 提供 了 一 套 完整 的 开发 框架 、 丰 富 的 组 
件 和 API， 相 比 React Native 和 Weex， 人 小 程序 将 技术 与 商业 进行 了 完美 


的 结合 。 


1.2” 接 入 流程 


小 程序 与 订阅 号 、 服 务 号 、 企 业 号 是 并 行 的 体系 ， 具 有 独立 的 注 
册 、 发布 流程 。 开 发 小 程序 首先 前 需要 在 微 信 公众 平台 上 注册 小 程 
序 ， 完 善 基本 信息 ， 然 后 下 载 开发 者 工具 进行 编码 ， 最 后 通过 开发 者 
工具 提交 代码 ， 官 方 审核 通过 后 便 可 发 布 。 要 注意 的 是 ， 现 阶段 每 个 
机 构 账 号 只 允许 注册 最 多 50 个 小 程序 ， 每 个 小 程序 一 年 需要 缴纳 300 
元 ， 所 有 人 小 程序 都 需要 绑 定 一 个 电子 邮箱 ， 一 个 手机 号 码 最 多 只 能 绑 
定 5 个 小 程序 。 


1.2.1 注册 小 程序 帐号 


注册 小 程序 帐号 只 需 如 下 四 步 : 


1) 在 微 信 公 众 平台 官网 首页 (mp.weixin.qq.com ) 点 击 右 上 角 
的 “立即 注册 ”按钮 ， 如 图 1-1 所 示 。 


和 3 Ee) Ese 
网 谷 信 公众 平台 x [We 
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系统 公告 微 信 公众 平台 关于 处 理 “二 元 期 权 ” 类 信息 的 ...。 中 微 信 公 众 平台 小 程序 开放 公测 四 ) 查看 更 多 


图 1-1 注册 小 程序 


2) 选择 注册 的 帐号 类 型 ， 选 择 “ 小 程序 ”"”， 如 图 1-2 所 示 。 


3) 进入 帐号 信息 页 面 ， 填 写 未 注册 过 公共 平台 、 开 放 平 台 、 企 业 
号 、 未 绑 定 个 人 号 的 邮箱 ， 这 个 邮箱 将 作为 以 后 登录 小 程序 后 台 的 帐 
号 ， 如 图 1-3 所 示 。 


名 谷 信 公 众 干 台 
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沪 应 用 门 dmall 局 前 庄 框 架 门 技术 文章 门 开发 需要 门 绘画 门 吉他 门 奇 苑 网 站 门 跨 平 台 门 书籍 ”站 季 直 化 门 小 程序 


注册 


Oms © sss 


具有 信息 发 布 与 传播 的 能 力 具有 用 户 管理 与 提供 业务 服务 的 能 力 
适合 个 人 及 媒体 注册 适合 企业 及 组 织 注册 


© ‘Fs © ts 


具有 出 色 的 体验 ， 可 以 被 便捷 地 获取 与 传播 具有 实现 企业 内 部 沟通 与 内 部 协同 管理 的 能 力 
适合 有 服务 内 容 的 企业 和 组 织 注册 适合 企业 客户 注册 


图 1-2 ”选择 帐号 类 型 


€ >0C |@ https://mp.weixin.qq.com/wxopen/waregister?action=stepl 
让 应 用 忆 dmall 站 前 庄 框 染 站 技术 文章 站 开发 于 要 站 绘画 站 吉他 门 奇 苑 网 站 门 等 平台 门 书籍 站 委 直 化 站 小 程序 


人 帐号 信息 @) 邮箱 激活 @@) 信息 登记 


作为 登录 帐号 ， 请 填写 未 被 微 信 公众 平台 注册 ， 未 
被 微 信 开 放 平 台 注册 ,未 被 个 人 微 信号 绑 定 的 邮箱 


字母 、 数 字 或 者 英文 符号 ， 最 短 8 位 ， 区 分 大 小 写 


确认 密码 
请 再 次 输入 密码 


图 1-3 ”填写 邮箱 信息 


4) 填写 个 人 帐号 信息 后 ， 会 收 到 一 封 激活 邮件 ， 点 击 激活 链接 ， 
进入 主体 信息 页 面 填写 相关 内 容 ， 即 可 完成 注册 流程 ， 主 体 信息 一 经 
提交 后 便 不 可 修改 ， 如 图 1-4 所 示 


[© 


请 确认 你 的 微 信 公 众 帐号 主体 类 型 属于 政府 、 媒 体 、 企 业 、 其 他 组 织 ， 并 请 按照 对 应 的 类 别 进行 信息 登记 . 
点 击 查 看 微 信 公众 乎 台 信息 登记 指引 。 


媒体 其 他 组 织 
企业 包括 : 企业 、 分 支 机 构 、 个 体 工商 户 、 企 业 相关 品牌 。 


主体 信息 登记 


企业 类 型 


企业 名 称 


需 与 当地 政府 颁发 的 商业 许可 证 书 或 企业 注册 证 上 的 企业 名 称 完全 一 致 ， 信 息 审核 审核 成 功 后 ,企业 各 称 
不 可 修改 。 


请 输入 15 位 营业 执照 注册 号 或 18 位 的 统一 社会 信用 代码 


注册 方式 请 先 填 写 名 称 


管理 员 信息 登 


图 1-4 完善 主体 信息 


1.2.2 ”开发 环境 准备 


完成 帐户 注册 后 ， 需 要 登录 微 信 公共 平台 官网 (mp.weixin.qq.com 
) ， 根 据 流程 完善 小 程序 信息 ， 如 图 1-5 所 示 。 需 要 注意 的 是 ， 目 前 小 
程序 名 称 一 旦 确定 后 便 不 能 修改 。 
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名 微 信 公 众 平台 | 小 程序 冰 0 


小 程序 发 布 流程 


step 


业 微 信 认证 
企业 类 型 请 先 通 过 微 信 认 证 完成 主体 真实 性 确认 。 否 则 将 无 法 发 布 小 程序 。 


小 程序 信息 。 ”补充 小 程序 的 基本 信息 ， 如 和 名称、 图 标 、 摘 述 等 


小 程序 开发 与 管理 

开发 工具 下 载 开发 者 工具 进行 代码 的 开发 和 上 传 

添加 开发 者 。 添加 开发 者 ， 进 行 代码 上 传 

配置 服务 器 在 开发 设置 页 面 坦 看 AppID 和 AppSecret , 配置 服务 器 域名 
帮助 文档 可 以 阅读 入 门 介绍 、 开 发 文档 、 设 计 规 范 和 运营 规范 


图 1-5 ”完善 小 程序 信息 


开发 小 程序 之 前 还 需要 进入 “用 户 身份 -开发 者 "， 绑 定 开 发 者 ， 如 
图 1-6 所 示 。 只 有 绑 定 的 开发 者 才能 使 用 开发 者 工具 编写 小 程序 ， 一 


小 程序 最 多 可 以 绑 定 20 个 开发 者 ， 未 认证 的 小 程序 最 多 可 以 绑 定 10 个 
开发 者 。 


€ CG | https://mp.weixin.qq.com/wxopen/admin?action=getdeveloper&token=2013868714&lang=zh_CN 


洪 应 用 癌 dmall 站 前 庇 框架 癌 技术 文章 门 开发 于 要 门 绘画 丫 吉他 站 奇 厂 网 站 站 跨 平台 门 书 秆 申 委 直 化 日 小 程序 


大 微 信 公 众 平台 1 小 程序 


还 可 绑 定 18 个 


图 1-6 ” 绑 定 开 发 者 


添加 开发 者 后 ， 需 要 要 进入 “设置 -开发 设置 "， 获 取 AppID， 如 图 
1-7 所 示 。AppID 十 分 重要 ， 只 有 填写 了 AppID 的 项 目 才能 通过 手机 微 
信 扫 码 进行 真 机 测试 。 


党 应 用 局 dmall 癌 前 雍 杠 架 癌 技术 文章 门 开发 于 要 门 绘画 站 吉他 门 麻 节 网 站 站 跨 平台 站 书籍 口 委 直 化 


6 各 微 信 公 众 平台 | 小 程序 


开发 者 ID 


AppID( 小 程序 ID) wx688e0bc628edd02e 


AppsSecret( 小 程序 客 钥 ) 


图 1-7 获取 AppID 


最 后 便 可 到 首页 下 载 开发 者 工具 ， 如 图 1-8 所 示 。 小 程序 开发 工具 
主要 用 于 小 程序 调试 、 预 览 ， 虽 然 自 带 了 代码 编辑 功能 ， 但 还 是 建议 
使 用 自己 熟悉 的 编辑 器 对 代码 进行 编辑 (如 : sublime 、atom 、brackets 


等 ) 。 
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小 程序 发 布 流程 


step 


| 微 信 认证 
企业 类 型 请 先 通 过 微 信 认证 完成 主体 真实 性 确认 。 否 则 将 无 法 发 布 小 程序 。 


小 程序 信息 。 ”补充 小 程序 的 基本 信息 ， 如 和 名称、 图 标 、 摘 述 等 


小 程序 开发 与 管理 


开发 工具 了 代码 的 开发 和 上 传 

添加 开发 者 添加 开发 者 ， 进 行 代码 上 传 

配置 服务 器 。 在 开发 设置 页 面 查 看 AppID 和 AppSecret ,配置 服务 器 域名 
帮助 文档 可 以 阅读 入 门 介绍 、 开 发 文档 、 设 计 规范 和 运营 规范 


图 1-8 下载 开 发 者 工具 


1 于 = 厅 


完成 开发 准备 后 我 们 便 可 以 开始 编写 小 程序 ， 微 信人 小 程序 的 开发 
十 分 商 单 ， 大 家 可 以 快速 上 手 。 下 面 我 们 利用 官方 提供 的 dmeo 让 大 家 
对 小 程序 开发 有 初步 认识 。 


1) 打开 微 信 开发 者 工具 。 第 一 次 启动 需要 扫描 二 维 码 登录 ， 如 图 
1-9 所 示 ， 开 发 权限 配置 参照 上 一 小 条 。 


《</> 


微 信 开发 者 工具 


“ 微 信 web 开 发 者 工具 ” 


图 1-9 ”有 登录 微 信 开 发 者 工具 


2) 登录 后 选择 “添加 项 目 ”。 


3) 在 填写 项 目 信 息 之 前 ， 先 创建 一 个 空 目 录 作 为 项 目 资源 目录 ， 
这 里 我 们 以 E: \weixin\demo 为 例 。 


4) 填写 项 目 信息 。 如 果 没 有 AppID 可 以 选择 “无 AppID”; 填写 项 
目 名 称 ， 项 目 名 称 在 微 信 开发 者 工具 中 是 唯一 的 ;项目 目录 选择 刚才 
创建 的 空 目 示 ， 这 里 一 定 要 保证 刚才 创建 的 目 孙 为 空 目 未 ， 这 样 下 面 


会 出 现 “ 在 当前 目录 中 创建 quick start 项 目 ” 选 项 ， 勾 选 这 个 选项 ， 如 图 
1-10 所 示 ， 然 后 点 击 “ 添 加 项 目 "按钮 。 


ApplD ”无 ApplD 部 分 功能 受 限 


返回 填写 小 程序 AppIlD 


项 目 名 称 ”demo 


项 目 目录 ENVWweixinydemo 


加 在 当前 目录 中 创建 quick start 项 目 


图 1-10 ”填写 项 目 信 息 


创建 好 后 的 界面 如 图 1-11 所 示 。 


微 信 开 发 者 工具 0.10.101400 I 


wifi 


Hello World 


s |Console 


图 1-11 第 一 个 小 程序 


这 样 我 们 便 成 功 创建 了 第 一 个 小 程序 ， 这 个 demo 是 官方 提供 的 示 
例 ， 第 一 个 页 面 展示 了 当前 登录 的 用 户 信息 ， 点 击 头像 会 跳 转 到 一 个 
记录 当前 小 程序 启动 时 间 的 日 志 页 面 。 为 了 让 大 家 进一步 体验 小 程序 
开发 ， 我 们 利用 Sublime 或 其 他 编辑 工具 打开 E: \weixindemo 文 件 夹 ， 


修改 ipdex.wxml， 将 “*{{fmotto}j}>” 蔡 换 为 “我 的 第 一 个 小 程序 ”， 
index.wxml 修 改 后 代码 如 下 : 


<!--index.wxml--> 
<view class="container"> 
<view bindtap="bindViewTap" class="userinfo"> 
<image class="userinfo-avatar" src="{{userIinfo.avatarUrl}}" background-size= 
"cover"></image> 
<text class="userinfo-nickname">{{userInfo.nickName}}</text> 
</view> 
<view class="Uusermotto"> 
<!1-- ”修改 这 句 代 码 ”--> 
<text class="user-motto"> 我 的 第 一 个 小 程序 </text> 
</view> 
</view> 


修改 后 点 击 “ 重 局 ”>， 如 图 1-12 所 示 。 


微 信 开 发 者 工具 0.10.101400 Ee 


更 wifi [RK | Console 


人 A 请 注意 无 AppID 
关联 下 调用 w 


Hello World 


Console 


图 1-12 ”重启 项 目 


重 局 后 ， 登 录 界 面 提 示 语 由 原来 的 “Hello World” 变 成 了 “我 的 第 一 
个 小 程序 ”， 如 图 1-13 所 示 。 


设置 ”动作 ”帮助 微 信 开发 者 工具 0.10.101400 一 器] 义 


iPhone 4s [RK | Console 


我 的 第 一 个 小 程序 


本 
s | Console 


图 1-13 ”我 的 第 一 个 小 程序 


填写 了 AppID 的 项 目 可 以 选择 “项 目 ~ 预览 ”如 图 1-14 所 示 ) ， 扫 
摘 二 维 码 在 微 信 中 体验 项 目 。 


微 信 开 发 者 工具 0.10.102800 


本 地 开发 目录 ”EX\work\Wwxapp-book\ 书 籍 \3 第 三 章 布局 demo 


2016/11/18 上 午 11:27:36, 编译 包 大 小 33 kb 


开启 ES6 转 ES5 
监听 文件 变化 ， 自 动 刷 新 开发 者 工具 
[开启 代码 压缩 上 传 


图 1-14 ”预览 小 程序 


至 此 我 们 简单 体验 了 一 个 小 程序 的 创建 过 程 ， 但 对 于 一 个 喜欢 “ 便 
根 间 底 ”的 学 习 者 来 说 ， 这 个 案例 远 远 不 够 ， 可 能 会 有 很 多 问题 ， 例 
如 : 


小 程序 局 动 入 口 在 哪里 ? 


"index.wxml、index.wxss、index.js 等 文件 是 否 可 以 重新 命名 ? 它们 


之 间 的 关系 是 什么 ? 目录 结构 有 怎样 的 规范 ? 


-WXML、WXSS 文 件 是 什么 ? 怎么 感觉 很 像 HTML 和 CSS? 


小 程序 开发 中 有 哪些 限制 ? 


大 家 可 以 先 按 日 己 理 解 笑 试 修改 项 目 中 相关 的 文件 ， 看 看 能 广 生 
什么 效果 ， 把 过 程 中 遇 到 的 问题 记录 下 来 ， 带 着 问题 阅读 后 面 的 章 


+ 


人 O 


民国 


本 章 简 单 介 绍 了 小 程序 开发 流程 ， 让 大 家 对 小 程序 有 体验 式 理 
解 。 小 程序 的 学 习 过 程 并 不 难 ， 掌 握 框架 、 组 件 、API 后 可 快速 上 
手 ， 技 术 细 届 问 题 我 们 将 在 后 续 章 市 中 进行 评 细 讲解 。 本 草 仅 介 绍 了 
主要 的 流程 ， 接 入 过 程 中 碰 到 的 细 市 问题 可 参考 官方 资料 : 


http://mp.weixin.qq.com/debug/wxadoc/introduction 。 


第 2 革 ”小 程序 开发 核心 


上 一 章 讲 解 了 小 程序 创建 流程 ， 本 章 主要 为 大 家 讲解 小 程序 框架 
及 核心 内 容 。 小 程序 框架 可 让 开发 者 在 微 信 中 用 尽 可 能 简单 、 高 效 的 
方式 开发 出 具有 原生 App 体 验 的 服务 ， 这 套 框 染 控制 着 小 程序 完整 的 
生命 周期 ， 负 责 页 面 的 加 载 、 演 染 、 销 毁 等 工作 ， 它 是 小 程序 的 核 
心 ， 学 习 小 程序 前 ， 我 们 一 定 要 对 这 套 框架 有 深入 的 了 解 。 本 章 主要 
对 小 程序 目录 结构 、 文 件 类 型 进行 详细 分 析 ， 重 点 介绍 小 程序 视图 层 
WXML、MXSS， 逻 辑 层 JS， 这 些 古 小 程序 开发 的 核心 内 容 。 本 章 个 
别 小 节 内 容 比 较 深 ， 学习 过 程 中 不 必 过 于 深究 ， 能 对 框架 有 个 整体 认 
识 即 可 。 


2.1 人 简介 


小 程序 框架 将 整个 系统 划分 为 视图 层 和 人 逻辑 层 ， 视 图 层 是 由 框 染 
设计 的 标签 语言 WXML (WeiXin Markup Language) 和 用 于 描述 
WXML 组 件 样 式 的 WXSS (WeiXin Style Sheets) 组 成 ， 它 们 的 关系 就 
像 HTML 和 CSS 的 关系 。WXML 和 WXSS 在 演 染 时 会 被 框架 解析 为 不 同 
端的 本 地 演 染 文件 ， 这 样 保证 一 套 代码 能 在 多 人 处 运行 ， 并 且 能 最 大 化 
地 接近 原生 App。 演 染 原 理 和 React Native、Weex 十 分 接近 ， 开 发 过 程 
中 我 们 不 必 深 究 WXML 的 渲染 原理 ， 只 需要 有 个 大 致 了 解 即 可 。 小 程 
序 逻 辑 层 是 一 套 运行 在 本 地 JavaScript 引 擎 的 JavaScript 代 码 ， 在 此 基础 
上 框架 实现 了 一 套 模块 化 机 制 ， 让 每 个 JS 文件 有 独立 的 作用 域 和 模块 
化 能 力 ， 这 套 模 块 化 机 制 遵循 CommonJS 规 范 ， 熟 悉 NodeJs 的 开发 者 应 
该 有 一 定 了 解 。 


小 程序 整体 开发 流程 非常 接近 前 端 HTML+CSS+JavaScript 的 开发 
模式 ， 与 前 端 开发 不 同 的 是 ， 在 小 程序 中 没有 DOM 的 概念 ， 在 本 地 的 
JavaScript 引 警 中 也 没有 window、document 等 对 象 ， 我 们 不 能 想当然 地 
通过 操作 DOM 来 操作 页 面 ， 小 程序 中 的 视图 层 和 逻辑 层 的 交互 古 通过 
数据 绑 定 和 事件 啊 应 实现 的 ， 这 有 是 一 种 单 问 绑 定 的 机 制 。 这 套 机 制 需 
要 首先 将 逻辑 层 和 视图 层 的 数据 和 事件 进行 绑 定 ， 当 需要 修改 页 面 
时 ， 逮 辑 层 只 需要 调用 特定 的 setData 方 法 修改 已 绑 定 的 数据 ， 这 时 杠 


架 会 自动 触发 WXML 重 新 泻 染 ， 达 到 逻辑 层 对 视图 层 的 控制 ， 当 框 染 
接收 到 用 户 交 互 操 作 时 ， 会 根据 视图 层 绑 定 的 事件 ， 执 行 逻辑 层 中 对 
应 的 事件 钞 数 ， 达 到 逻辑 层 对 视图 层 的 啊 应 ， 视 图 层 与 逻辑 层 的 天 系 
如 图 2-1 所 示 。 这 套 机 制 是 小 程序 框架 的 工作 原理 ， 在 后 续 内 容 中 我 们 
将 反复 所 及 ， 加 深 大 家 对 它 的 理解 。 


用 户 交 互 行为 ， 通 过 WXML 事 件 逻辑 层 调 用 setData0 
绑 定 ， 调 用 逻辑 层 相 关 事 件 方法 。 触发 视图 层 演 染 。 
逻辑 层 


图 2-1 视图 层 与 逻辑 层 关系 


2.2 “徒手 ”创建 小 程序 


为 了 让 开发 者 更 好 地 理解 小 程序 框架 运行 机 制 ， 接 下 来 将 市 领 大 
家 “徒手 ?创建 一 个 结构 最 简单 的 小 程序 ， 这 样 每 个 细节 都 是 开发 者 目 
己 完成 的 ， 这 对 理解 小 程序 框架 有 很 大 帮助 。 步 又 如 下 : 


1) 创建 项 目 目 录 ， 这 里 以 E: \weixinmyproject 为 例 。 


2) 按 图 2-2 所 示 的 目录 结构 创建 文件 : 


3) 打开 app.json， 写 入 以 下 代码 : 


"pages" : [ 
/* 指定 默认 启动 页 面 地 址 */ 
"mypages/index/index" 


4) 打开 index.wxml， 写 入 以 下 代码 : 


<view bindtap="countClick"> 我 是 jndex 页 面 ,你 点 击 了 {{count}} 次 </view> 


5) 打开 index.js 文 件 ， 写 入 以 下 代码 : 


Page( { 
data : { 
count : 0 


* 
countClick : function() { 
this.setData( 
count : this.data.count + 1 


就 这 么 几 步 ， 一 个 最 简单 的 小 程序 便 搭建 好 了 ， 项 目 中 仪 包含 一 
个 index 页 面 ， 这 个 目录 结构 是 最 简单 、 最 基础 的 小 程序 结构 。 接 下 来 


我 们 将 它 导 入 开发 者 工具 中 看 看 运行 效果 。 


6) 打开 微 信 开发 者 工具 ， 填 写 AppId 和 项 目 名 称 ， 点 击 “ 选 择 ” 按 
钮 添加 项 目 ， 项 目 目 录 选 择 刚才 创建 的 目录 E: \weixin\myproject， 点 
击 “ 添 加 项 目 ” 完 成 添加 ， 如 图 2-3 所 示 : 


myproject 


" ( 饭 mypages 
" [iNdex 

index.js 
index.json 
< > INdex.wxml 
{ } Index.wxss 

appjs 

appjson 

{ } app.wxss 


图 2-2 日 隶 结构 


无 ApplD 部 分 功能 受 限 


myproject 


E-\weixin\imyproject 


图 2-3 项目 配置 界面 


7) 导入 项 目 后 我 们 便 能 看 到 运行 界面 ， 当 我 们 点 击 文字 时 ， 点 击 
次 数 也 会 随 之 增加 (如 图 2-4 所 示 ) 。 


这 就 是 最 简单 的 小 程序 ， 所 有 复杂 的 项 目 都 是 围绕 这 个 结构 进行 
拓展 的 。 当 运行 这 个 项 目 时 ， 框 以 首先 会 解析 配置 文件 app.json， 通 过 
pages 设 置 找到 默认 首页 页 面 mypages/index/index (pages 第 一 个 路 径 默 


认为 首页 ， 然 后 加 载 mypage/index 目 孙 中 index.wxml、index.wxss、 


index.js、index.json 这 4 个 文件 进行 页 面 泻 染 。 


设置 ”动作 ”帮助 微 信 开发 者 工具 0.10.101400 一 癌 ] 义 


iPhone 4 wifi v [x Console 


© 定 top 


undefined 


undefined 


拷 是 index 页 面 , 你 点 击 了 0 次 


Console 


图 2-4 ”myproject 运 行 界面 


在 index.wxml 文 件 中 ， 我 们 简单 使 用 了 <view/> 组 件 ， 页 面 泻 染 
时 ， 框 架 将 逻辑 层 中 data 的 count 属 性 与 视图 层 的 count 进 行 了 绑 定 ， 所 
以 一 打开 页 面 会 显示 点 击 次 数 为 0。 当 点 击 <view/> 时 ， 会 触发 tap 事 
件 ， 这 时 视图 层 根 据 <view/> 组 件 bindtap 属 性 值 ， 将 绑 定 的 countClick 事 
件 发 送 给 逻辑 层 ， 导 辑 层 根据 方法 名 找到 对 应 的 事件 处 理 函 数 


countClick 并 执行 。countClick 函 数 中 ， 我 们 调用 了 setData 方 法 修改 
count 值 ， 并 触发 视图 层 泻 染 ， 所 以 页 面 中 的 数字 随 着 点 击 次 数 增加 ， 
这 种 视图 层 和 人 逻辑 层 之 间 相 互通 信 的 机 制 便 是 小 程序 的 数据 估 定 和 事 
件 啊 应 系统 。 


在 一 个 完整 的 小 程序 中 ， 文 件 主要 分 为 框架 程序 主体 文件 和 页 面 
文件 两 大 类 : 


-框架 程序 主体 文件 是 系统 级 别 文件 ， 一 个 项 目 只 有 一 份 ， 分 别 是 
app.json、app.js 和 app.wxss， 它 们 分 别 控制 小 程序 整体 配置 、 逻 辑 和 整 
体 样 式 ， 小 程序 启动 时 只 会 执行 一 次 。 这 3 个 文件 必须 放 在 项 目 根 目 
孙 ， 且 文件 名 必须 是 app， 其 中 app.json 和 app.js 是 必须 的 。 


一 个 小 程序 有 一 个 或 多 个 页 面 ， 一 个 页 面 由 .wxml、.wxss、.js 和 
json 四 个 文件 组 成 ， 它 们 分 别 控制 页 面 的 结构 、 样 式 、 逻 辑 和 配置 ， 其 
中 .wxml 文 件 和 .js 文件 是 必须 的 ， 按 照 框架 规定 ， 同 一 个 页 面 的 这 4 个 
文件 必须 具有 相同 的 路 径 和 文件 名 ， 所 以 在 这 个 项 目 中 我 们 将 它们 放 
置 在 mypages/index 路 径 下 且 文 件 名 统一 为 index， 其 中 index 目 孙 名 可 以 
和 页 面 文件 名 不 一 致 ， 为 了 便于 管理 我 们 尽量 将 页 面目 未 名 和 页 面 文 
件 名 保持 一 致 。 


现在 我 们 对 小 程序 框架 有 个 大 致 的 认识 ， 下 面 ， 将 分 别 为 大 家 讲 
解 框 染 主 体 文件 和 框架 页 面 的 符 性 及 使 用 方法 。 


2.3 ”框架 主体 文件 


框架 主体 文件 由 app.json、app.js、app.wxss 构 成 ， 这 3 个 文件 必须 
放置 在 项 目 根 目录 ， 一 个 小 程序 只 有 一 份 ， 它 们 负责 小 程序 整体 的 配 
置 : 


“app.json: 小 程序 公共 设置 ， 配 置 小 程序 全 局 设置 。 


-app.js: 小 程序 逻辑 文件 ， 主 要 用 于 注册 小 程序 全 局 实例 ， 编 译 
时 会 和 其 他 页 面 逻辑 文件 打包 成 一 份 JavaScript 文 件 。 


"app.wxss: 小 程序 公共 样式 表 ， 对 所 有 页 面 的 布局 文件 都 有 效 。 


app.json 和 app.js 是 必须 存在 的 ，app.wxss 不 是 必须 创建 的 ， 可 以 根 
据 项 目 情况 进行 创建 。 接 下 来 我 们 逐个 分 析 每 个 文件 。 


2.3.1 配置 文件 (app.json，) 


app.json 是 小 程序 配置 文件 ， 编 写 时 要 严格 遵循 json 的 格式 规范 。 
app.json 在 程序 加 载 时 加 载 ， 负 责 对 小 程序 的 全 局 配置 ， 其 配置 项 有 : 


pages: 设置 页 面 路 径 ， 必 填 项 。 


-window: 设置 默认 页 面 的 窗口 表现 。 

-tabBar: 设置 tab 的 表现 。 

networkTimeout: 设置 网 络 超时 时 间 。 
-debug: 设置 是 否 开 居 debug 模式， 默认 关闭 。 


app.json 文 件 内 容 整 体 结构 如 下 : 


ages" : [], . 
// 默认 页 面 的 窗口 设置 


Bar™" : {}, 
// 设置 网 络 请 求 API 的 超时 时 间 
"networkTimeout" : {}, 
// 是 否 为 debug 模 式 
"debug" : false 
} 


1.pages 配 置 


pages 负 责 注 册 小 程序 页 面 ， 必 须 填写 ，value 值 为 一 个 包含 页 面 路 
径 的 数组 ， 用 来 指定 小 程序 由 哪些 页 面 构成 ， 每 一 项 由 页 面 “ 路 径 + 文 
件 名 ”组 成 ， 如 下 所 示 : 


"pages" i 
"mypages/index/index", 
"mypages/page2/mypagefilename", 
"otherpages/index/index" 


pages 数 组 中 页 面 路 径 不 需要 填写 文件 后 级 名 ， 泻 染 页 面 时 框架 会 
自动 寻找 路 径 .json，.js，.wxml，.wxss 四 个 文件 进行 整合 ， 如 上 文 配置 
中 “mypages/index/index” 路 径 ， 页 面 加 载 时 框架 会 自动 匹配 寻 
找 “mypages/index/index.json”、“mypages/index/index.js”、“mypages/inde 
x/index.wxml”、“mypages/index/index.wxss” 这 四 个 文件 ， 路 径 中 的 文件 
名 可 以 和 目 录 名 不 一 致 ， 但 在 项 目 过 程 中 ， 为 了 便于 管理 ， 建 议 文件 
名 和 目录 名 保持 一 致 。pages 配 置 数组 第 一 项 代表 小 程序 的 初始 页 面 。 
小 程序 中 增加 、 删 除 页 面 ， 都 需要 对 pages 进 行 修 改 ， 并 且 重 启 项 目 。 


2 .window 配 置 


window 负 责 设置 小 程序 状态 栏 、 导 航 条 、 标 题 、 窗 口 背景 色 等 系 


统 级 样式 。 属 性 有 : 


:navigationBarBackgroundColor 导航 栏 背 景 颜 色 ， 值 为 HexColor 
(十 六 进 制 颜色 值 ，， 如 : “#ff83fa”"， 默 认 值 为 #000000。 


navigationBarTextStyle: 导航 栏 标 题 颜 色 ， 仅 文 持 black/white， 默 
认 值 为 white 。 


navigationBarTitleText: 导航 栏 标题 文字 内 容 。 


:backgroundColor: 窗口 背景 色 ， 值 为 HexColor (十 六 进 制 颜色 
值 ) ， 如 : “#if83fa”， 默 认 值 为 #ffffff 。 


:backgroundTextStyle: 下 拉 背 景 字 体 、Loading 岁 的 样式 ， 仅 文 持 
dark/light ° 


-enablePullIDownRefresh: 是 否 开 局 下 拉 刷 新 ， 默 认为 false， 开 局 
后 ， 当 用 户 下 拉 时 会 触发 页 面 onPulDownRefresh 事 件 。 


配置 项 目 如 图 2-5 所 示 。 


- navigationBa 


书籍 编写 demo backg round 


图 2-5 ”有 界面 配置 区 域 


3.tabBar 配 置 


当 程序 顶部 或 底部 需要 菜单 栏 时 ， 我 们 可 以 通过 配置 tbBar 快 速 实 
现 ，tabBar 是 个 非 必 填 项 目 。 可 配置 属性 如 下 : 


:color: tab 上 的 文字 默认 颜色 ， 值 为 HexColor (十 六 进 制 颜色 
值 ) ， 必 填 项 。 


selectedColor: tab 上 的 文字 选中 时 的 颜色 ， 值 为 HexColor (十 六 
进 制 颜色 值 ) ， 必 盾 项 。 


backgroundColor: tab 的 背景 色 ， 值 为 HexColor 〈 十 六 进 制 颜色 
值 ) ， 必 填 项 。 


borderStyle: tabbar 上 边框 的 颜色 ， 仅 文 持 black/white， 默 认 值 为 
black 。 


list: tab 的 列表 ， 必 填 项 ， 其 值 为 一 个 数组 ， 最 少 2 个 、 最 多 5 个 
tab， 数 组 中 每 一 项 是 一 个 对 象 ， 代 表 一 个 tap 的 相关 配置 ， 每 项 的 相关 
配置 如 下 : 


.pagePath: 页 面 路 径 ， 必 须 在 pages 中 先 定义 ， 必 填 项 。 
-text: tab 上 按钮 的 文字 ， 必 填 项 。 


"iconPath: tab 上 icon 图 片 的 相对 路 径 ，icon 大 小 限制 为 40kb， 必 填 
项 。 


“selectedIconPath: 选中 时 图 片 的 相对 路 径 ，icon 大 小 限制 为 40kb， 
必 填 项 。 


:position: tab 在 顶部 或 底部 显示 ， 可 选 值 为 bottom、top， 默 认 值 为 


bottom ° 
示例 代码 见 代码 清单 2-1。 


代码 清单 2-1 app.json 


{ 
"pages" 
"mypages/index/index", 
"mypages/list/list" 
"tabBar™" : 
"color™" : "#000000", 
"selectedColor™" : "#ff7f50", 
"backgroundColor™" : "#ffffff", 
"borderSstyle" : "black", 
"list" : [ 
{ 
"iconPath" : "images/home.png", 
"selectedIconPath" : "images/home-selected.png", 
"pagePath" : "mypages/index/index", 
"text" : nn 页 " 
}, 
{ 
"iconPath" : "images/search.png", 
"selectedIconPath" : "images/search-selected.png", 
"pagePath" : "mypages/list/list", 
"text" :“" 搜 索 " 
}, 
{ 
"iconPpath" : "images/list.png", 
"selectedIconPath" : "images/list-selected.png", 
"pagePath" : "mypages/list/list", 
"text" : "列表 " 
] } 
"borderSstyle" : "bottom" 
3 


配 苗 后 页 面 效 末 如 图 2-6 所 示 。 
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图 2-6 tabBar 配 置 示例 
4.networkTimeout 配 置 


小 程序 中 各 种 网 络 请 求 API 的 超时 时 间 只 能 通过 networkTimeout 统 
一 设置 ， 不 能 在 API 中 单独 设置 ， 具 体 的 网 络 请 求 API 可 参考 后 面 章 


记 ，networkTimeout 支 持 的 属性 有 : 
Tequest: 设置 wx.request 的 超时 时 间 ， 单 位 诸 秒 。 
.connectSocket: 设置 wx.connectSocket 的 超时 时 间 ， 单 位 毫秒 。 
UploadFile: 设置 wx.uploadFile 的 超时 时 间 ， 单 位 毫秒 。 
-downloadFile: 设置 wx.downloadFile 的 超时 时 间 ， 单 位 轰 秒 。 


示例 代码 如 下 : 


"pages™" : 
"mypages/index/index" 


. 

"networkTimeout" : { 
"request" : 60000, 
"connectSocket" : 60000 


5.debug 配 置 


此 配置 项 控制 是 否 开 局 debug 模 式 ， 上 默认 是 关闭 的 。 开 局 debug 模 
式 后 ， 在 开发 者 工具 的 控制 面板 ， 调 试 信息 以 info 的 形式 输出 ， 如 图 2- 
7 所 示 。 其 中 信息 有 Page 的 注册 、 页 面 路 由 、 数 据 更 新 、 事 件 触 发 ， 可 
以 帮助 开发 考 快 速 定 位 一 些 币 见 问 题 。 


设置 动作 ”帮助 微 信 开 发 者 工具 0.10.101400 


iPhone 4 i = [RK Console Sources Network 分 


©S 守 -top 
@ App: onLaunch have been invoked vice.ijs: 
undefined app. js [sm]:3 
我 是 index 页 面 ， 你 点 击 了 0 次 @ App: onShow have been invcked WAService.is:2 
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> 


debug 模 式 信息 


; |Console 


图 2-7 开启 debug 模 式 


示例 代码 如 下 : 


"pages" : [ 
"mypages/index/index", 
"mypages/list/l1ist" 


"qebug" : true 


以 上 便 是 app.json 的 5 类 配置 项 ， 这 些 配置 项 都 是 全 局 的 ， 小 程序 中 
除了 app.json 这 种 全 局 配置 文件 还 有 页 面 配 置 文件 ， 当 路 由 到 对 应 页 面 
时 ， 页 面 配置 文件 的 配置 项 将 会 履 兰 全 局 配置 ， 页 面 配 置 文件 将 在 后 

续 内 容 中 进行 详细 介绍 。 


2.3.2 小 程序 介 则 appjs) 


小 程序 中 逻辑 文件 分 为 页 面 逻辑 文件 和 小 程序 逻辑 文件 ，app.js 便 
征 小 程序 逻辑 文件 ， 在 这 个 文件 中 ， 我 们 可 以 通过 App () 画 数 注册 
小 程序 生命 周期 函数 、 全 局 方法 和 全 局 属性 ， 已 注册 的 小 程序 实例 可 
以 在 其 他 人 逻辑 层 代码 中 通过 getApp () 获取 。 


1. 注 册 小 程序 


App () 函数 用 于 注册 一 个 小 程序 ， 参 数 为 一 个 Object 对 象 ， 在 这 
个 参数 对 象 中 我 们 可 以 注册 目 定 义 方法 和 属性 供 全 局 使 用 ， 束 像 在 
quick start 项 目 中 ， 我 们 利用 App () 注册 了 用 户 登 录 信 息 。App ( 
函数 必须 在 app.js 中 注册 ， 且 不 能 注册 多 个 ， 其 参数 属性 如 下 : 


:onLaunch: 生命 周期 函数 ， 监 听 小 程序 初始 化 。 当 小 程序 初始 化 
完成 时 ， 就 会 触发 onLaunch，onLoaunch 事 件 全 局 只 会 触发 一 次 。 


-onShow: 生命 周期 画 数 ， 监 听 小 程序 显示 。 当 小 程序 启动， 或 者 
从 后 台 进 入 前 台 显 示 时 都 会 触发 onShow 。 


-onHide: 生命 周期 画 数 ， 监 听 小 程序 隐藏 。 当 小 程序 从 前 台 进 入 
后 台 会 触发 。 


其他: 开发 者 可 以 添加 任意 的 函数 或 数据 到 Object 参数 中 ， 这 些 
属性 会 被 注册 到 小 程序 对 象 中 ， 其 他 逻辑 文件 可 以 通过 getApp () 画 
数 获 取 已 注册 的 小 程序 实例 。 


天 于 小 程序 生命 周期 玉 数 的 执行 时 机 我 们 要 特别 讲解 一 下 当局 
动 一 个 小 程序 时 ， 首 先 会 完 依 次 触发 onLaunch 和 onShow 方 法 ， 然 后 通 
过 app.json 的 pages 属 性 注册 相应 的 页 面 ， 最 后 根据 默认 路 人 径 加 载 首 
页 ; 当 用 户 点 击 左 上 角 关 闭 ， 或 者 按 了 设备 Home 按 钮 离开 微 信 时 ， 人 小 
程序 并 没有 直接 销毁 ， 而 是 进入 了 后 台 ， 这 两 种 情况 都 会 触发 onHide 
方法 ; 当 再 次 唤醒 微 信 (针对 点 击 Home 按 钮 离开 微 信 ) 或 再 次 从 微 信 
中 打开 小 程序 时 ， 又 会 从 后 台 进 入 前 台 ， 这 时 会 触发 onShow 方 法 。 只 
有 当 小 程序 进入 后 台 一 定时 间 ， 或 者 系统 资源 占用 过 高 ， 才 会 被 真正 
销毁 。 


注册 小 程序 示例 代码 如 下 : 


App( 苹 
onLaunch : ne { 


// 小 程序 初始 化 完成 时 执行 


onshow : function() { 
显示 小 程 予 太 执行 


onHide : function() { 
// 隐藏 小 程序 时 执行 


} 
globalFunction : ' 我 是 全 局 函数 '， 
globalData : ' 我 是 全 局 属性 ' 


2. 获 取 小 程序 实例 


注册 小 程序 后 ， 在 其 他 逻辑 文件 中 ， 可 以 通过 全 局 函数 getApp 
() 获取 小 程序 实例 ， 例 如 : 


var app = getApp(); 
console.1og( app.globalData ); 


在 App () 注册 的 函数 中 ， 我 们 可 以 使 用 this 直 接 获取 App 实 例 ， 
而 不 用 getApp () 方法 。 通 过 getApp () 获取 实例 后 ， 可 以 获取 注册 
的 属性 、 调 用 注册 的 方法 ， 但 不 要 私 目 调用 生命 周期 函数 
(onLaunch、onShow、onHide) ， 这 样 会 打 乱 项 目 逻 辑 ， 除 非 你 已 经 
对 它们 很 熟悉 。 


2.3.3 ”全 局 样式 (app.wxss) 


app.wxss 征 全 局 样式 表 ， 对 项 目 中 每 个 页 面 都 有 效 ， 可 将 一 些 系 
统 级 别 的 统一 样式 风格 写 入 这 个 文件 ， 页 面 泻 染 时 ， 框 架 页 中 的 .wxss 
文件 样式 会 履 兰 app.wxss 中 相同 的 选择 磊 样 式 。 WXSS 十 小 程序 基于 
CSS 拓 展 的 一 套 样式 语言 ， 它 实现 了 CSS 大 部 分 规则 ， 其 具体 介绍 请 


参考 下 一 他 。 


小 程序 框架 主体 相关 的 文件 app.json、app.js、app.wxss 我 们 已 经 全 
部 介绍 完成 ， 下 面 为 大 家 介绍 框架 页 面相 关 的 文件 。 


2.4 和 框架 页 面 文件 


小 程序 中 一 个 框架 页 面包 侣 4 个 文件 ， 同 一 框架 页 面 的 这 4 个 文件 
必须 具有 相同 的 路 径 与 文件 名 ， 进 入 小 程序 时 或 页 面 跳 转 时 ， 人 小 程序 
会 根据 app.json 配 置 的 路 径 找到 对 应 的 资源 进行 演 染 。 


-js 文件 : 页 面 逻 辑 文件 ， 必 要 项 。 
.wxml 文 件 : 页 面 结构 文件 ， 必 要 项 。 
.wxss 文 件 ， 页 面 样式 文件 。 

json 文件 ， 页 面 配置 文件 。 


与 框架 主体 文件 相 比 框架 页 面 文 件 多 了 一 种 页 面 结构 文件 ， 其 余 3 
个 文件 和 框架 主体 文件 的 功能 类 同 ， 下 面 我 们 一 一 讲解 每 个 文件 作 
用 。 


2.4.1 页面 配置 文件 


我 们 首先 讲解 页 面 配置 文件 ， 页 面 配置 文件 和 框架 配置 文件 一 
样 ， 是 一 个 json 文 件 ， 与 框架 配置 文件 不 同 的 是 ， 页 面 配 置 文件 是 非 
必要 存在 的 ， 同 时 页 面 配置 文件 的 配置 项 只 有 window， 控 制 当前 页 面 
的 窗口 才 现 ，window 的 属性 和 appjson 一 致 。 演 染 页 面 时 ， 页 面 中 的 
window 配 置 项 会 覆盖 app.json 中 的 相同 配置 项 。 


由 于 页 面 的 .json 只 能 配置 window 相 关 必 性， 编写 时 只 需 直 接 写 出 
属性 ， 不 用 写 window 这 个 键 ， 如 下 所 示 : 


"navigationBarBackgroundColor": "#000000", 
"navigationBarTextStyle": "black", 
"navigationBarTitleText": "我 的 页 面 "， 
"backgroundColor": "#efefef", 
"backgroundTextStyle": "light" 


2.4.2 页面 逻 辑 文件 (JavaScript) 


页 面 逻 辑 文件 主要 功能 有 : 设置 初始 化 数据 ， 注 册 当 前 页 面 生命 
周期 画 数 ， 注 册 事件 处 理 函 数 等 。 小 程序 的 逻辑 层 文件 是 JavaScript 广 
件 ， 所 有 的 逻辑 文件 ， 包 括 app.js， 最 终 将 会 打包 成 一 个 js 文件 ， 在 小 
程序 局 动 时 运行 ， 直 到 小 程序 销 妈 ， 类 似 于 ServiceWorker， 所 以 逻辑 
层 也 称 为 App Service 。 


在 小 程序 中 ， 每 个 逻辑 文件 有 独立 的 作用 域 ， 并 具备 模块 化 能 
力 。 由 于 JavaScript 罗 辑 文件 是 运行 在 纯 JavaScript3 引 警 中 而 并 非 运行 在 
浏 贤 妖 中 ， 一 些 浏览 器 提供 的 特有 对 象 ， 如 document、window 等 ,在 
小 程序 中 都 无 法 使 用 ， 同 理 ， 一 些 基于 document、window 的 框架 如 : 
jQuery、Zepto 都 不 能 在 小 程序 中 使 用 ， 同 时 我 们 不 能 通过 操作 DOM 改 
变 页 面 ， 这 时 需要 我 们 将 面 同 DOM 操 作 的 编程 思路 转化 为 数据 绑 定 和 
事件 响应 。 


1. 注 册页 面 


在 页 面 逻 辑 文件 中 需要 通过 Page () 函数 注册 页 面 ， 指 定 页 面 的 
初始 数据 、 生 命 周期 函数 、 事 件 处 理 函 数 等 ， 参 数 为 一 个 Object 对 
象 ， 其 属性 如 下 : 


-data: 页 面 的 初始 数据 ， 数 据 格式 必须 是 可 转 成 JSON 格 式 的 对 象 
类 型 。 当 页 面 第 一 次 泻 染 时 ，data 会 以 JSON 的 形式 由 逻辑 层 传 至 泻 染 
层 ， 演 染 层 可 以 通过 WXML 对 数据 进行 绑 定 。 

:onLoad: 生命 周期 函数 ， 页 面 加 载 时 触发 。 一 个 页 面 只 会 调用 一 


次 ， 接 受 页 面 参 数 ， 可 以 获取 wx.navigateTo、wx.redirectIo 以 及 中 的 


query 参 数 。 


-onShow: 生命 周期 画 数 ， 页 面 显示 时 触发 。 每 次 打开 页 面 都 会 调 
用 二 AR 


-onReady: 生命 周期 函数 ， 页 面 初次 涂 染 完成 时 触发 。 一 个 页 面 
生命 周期 中 只 会 调用 一 次 ， 代 表 当 前 页 面 已 经 准备 妥当 ， 可 以 和 视图 
层 进行 交互 。 一 些 对 弄 面 的 设置 ， 损 作 需 要 在 页 面 准备 妥当 后 调用 ， 
如 wx.setNavigationBarTitle 需 要 在 onReady 之 后 设置 ， 详 细 可 以 参考 后 
面 的 “页 面 生命 周期 ”小 条。 


:onHide: 生命 周期 苏 数 ， 页 面 隐 着 时 触发 。 
:onUnload: 生命 周期 男 数 ， 页 面 炙 载 时 触发。 


.onPullDownRefresh: 页 面相 关 时 间 处 理 函 数 ， 用 户 下拉 时 触发 。 
使 用 时 需要 将 app.json 配 置 中 window 的 enablePullDownRefresh 属 性 设置 


为 true。 当 处 理 完 数 据 刷 狐 后 ， 可 以 调用 wx.stopPullDownRefresh 方 法 
停止 当前 页 面 的 下 拉 刷 新 。 


:onReachBottom: 页 面 上 拉 触 底 事 件 的 处 理 函 数 。 


其 他 : 开发 者 可 以 添加 任意 的 函数 或 数据 到 Object 参数 中 ， 可 以 
用 this 访 问 这 些 函 数 和 数据 。 


示例 代码 如 代码 清单 2-2 所 示 : 
代码 清单 2-2 ”页面 逻辑 文件 


// 获取 app 实 例 
var app = getApp(); 
Page( { 四 
data : { // 页 面 初始 化 数据 
count : 0 


}, 

onLoad : function() { 
// 页 面 加 载 时 执行 

}, 


onShow : function() { 
// 页 面 打 开 时 执行 
console,1og( app.globalData ); 


} 
onReady : function() { 
// 贝 下 面 初次 泻 染 完成 执行 ， 个 页 日 只 会 调 次 


} 
onHide : function() { 
/ 页 面 隐藏 时 执行 


onunload : _function() { 
// 页 面 和 卸载 时 执 4 


}, 

RU len : function() { 
// 下 拉 刷 新 时 执行 

}, 


onReachBottom : function() { 
// 下 拉 触 底 时 执行 

}, 

// 


定义 函数 ， 可 与 泻 染 层 中 的 组 件 进行 事件 绑 定 
countCclick : function() { 
// 触发 视图 层 重新 泻 染 
this.setData( { 
count : this.data.count + 1 


了 


}, 
// 自 定义 数据 


customData : { 
name : ' 微 信 ' 


} ); 


页 面 的 生命 周期 函数 比 小 程序 的 生命 周期 函数 略微 复杂 一 点 ， 乔 
收 其 执行 顺序 能 避免 在 不 恰当 的 生命 周期 画 数 中 调用 还 未 创建 的 对 象 
或 方法 ， 小 程序 框架 以 栈 的 形式 维护 了 当前 的 所 有 页 面 ， 当 发 生路 由 
切换 时 ， 页 面 栈 和 生命 周期 函数 的 关系 如 下 : 


小 程序 初始 化 : 默认 页 面 入 栈 ， 依 次 触发 默认 页 面 onLoad、 
onShow、onReady 方 法 。 


.打开 新 页 面 : 新 页 面 入 栈 ， 依 次 触发 新 页 面 onLoad、onShow、 
onReady 方 法 。 


:页 面 重 定 癌 : 当前 页 面 出 栈 并 印 载 ， 触 发 当前 页 面 onUnload 方 
法 ， 新 页 面 入 栈 ， 触 发 新 页 面 onLoad、onShow、onReady 方 法 。 


页面 返回 : 页 面 不 断 出 栈 并 番 载 ， 触 发 当前 弹出 页 面 onUnload 方 
法 ， 直 到 返回 目标 页 面 ， 痢 页 面 入 栈 ， 和 触发 新 页 面 onShow 方 法 。 


"Tab 切换 当前 页 面 出 栈 但 不 印 载 ， 仅 触发 onHide 方 法 ， 新 页 面 
入 栈 ， 如 有 果 当 前 页 面 是 狐 加 载 的 ， 触 发 onLoad、onShow、onReady 方 
法 ， 如 宁 当 前 页 面 已 加 载 过 ， 仅 触发 onShow 方 法 。 


.程序 从 前 台 到 后 台 : 触发 当前 页 面 onHide 方 法 ， 触 发 App onHide 
Jj 


-程序 从 后 台 到 前 台 : 触发 小 程序 onShow 方 法 ， 触 发 页 面 onShow 
方法 。 


整体 来 说 ， 如 果 页 面 在 生命 周期 中 ， 只 会 触发 onShow 和 onLoad 方 
只 有 加 载 和 御 载 时 才 会 触发 onLoad、onReady 和 onUnload 方 法 ， 
而 触发 页 面 氏 载 只 有 页 面 返 回 和 页 面 重 定向 两 种 操作 。 页 面 生命 周期 
函数 的 执行 顺序 不 用 死记 硬 背 ， 开 发 过 程 中 可 以 开局 app.json 中 的 
debug 模 式 ， 路 由 切换 时 ， 小 程序 、 页 面 的 生命 周期 函数 执行 顺序 都 会 
在 控制 台 以 info 形 式 输出 ， 在 后 面 小 节 中 我 们 将 对 页 面 生命 周期 作 简 
单 介绍 


2. 获 取 当 前 页 面 栈 


有 注册 就 有 获取 ，getCurrentPages () 函数 便 是 用 于 获取 当前 页 
面 栈 的 实例 ， 页 面 栈 以 数组 形式 按 栈 顺序 给 出 ， 第 一 个 元 素 为 首页 ， 
最 后 一 个 元 素 为 当前 页 面 。 不 要 党 试 修改 页 面 栈 ， 这 会 导致 路 由 以 及 
页 面 状态 错误 。 


示例 代码 如 下 : 


/* 获取 页 面 栈 */ 


var pages = getCurrentPpages(); 


/* 获取 当前 页 徊 对 象 “/ 
var currentPage = pages[pages.length - 1]; 


3. 事 件 处 理 函 数 


页 面 对 象 中 注册 的 函数 可 以 和 视图 层 中 的 组 件 进行 绑 定 ， 当 达到 
触发 条 件 时 ， 束 会 执行 Page 中 定义 的 相应 事件 ， 这 类 目 定义 函数 统称 
为 事件 处 理 函 数 。 小 程序 中 组 件 的 事件 分 为 通用 事件 和 特殊 事件 ， 事 
件 类 型 请 参考 后 面 2.4.3 节 中 “事件 ”小节 。 


示例 代码 如 下 : 


<view bindtap= "myevent "> 点 击 执行 逻辑 层 事 件 </view> 


Page( { 
myevent : function() { 
log( ' 点 击 了 vie 


console. w' ); 


} 
} ); 
4 触发 视图 层 泻 染 


页 面 首 次 加 载 时 ， 框 染 会 结合 初始 化 数据 泻 染 页 面 ， 在 逻辑 层 中 
则 需 主动 调用 Page.prototype.setData () 方法 ， 而 不 能 直接 修改 Page 的 
data 值 ， 这 样 不 仅 无 法 触发 视图 层 泻 染 ， 还 会 造成 数据 不 一 人 怪 。 当 
Page.prototype.setData () 被 调用 时 ， 会 将 数据 从 逻辑 层 发 送 到 视图 层 
触发 视图 层 重 绘 ， 同 时 会 修改 Page 的 data 值 。setData () 接受 一 个 
Object 对 象 参数 ， 方 法 会 自动 将 this.data 中 的 key 对 应 的 值 变 成 Object 参 
数 中 key 对 应 的 值 。 当 Object 参数 key 对 应 的 值 和 this.data 中 key 对 应 的 值 


一 致 时 ， 将 不 会 触发 视图 层 泻 染 。 在 项 目 中 我 们 一 定 要 保证 视 岁 层 和 
逻辑 层 的 数据 一 致 。 


Object 参 数 的 key 值 非常 灵活 ， 可 以 按 数据 路 径 的 形式 给 出 ， 如 
array[5].info、obj.key.subkey， 并 且 这 样 使 用 时 ， 不 需要 在 this.data 中 预 
完 定义 。 


示例 代码 如 下 : 


<view>{{text}}</view> 
<button bindtap="changeText"> 修 改 普通 数据 </button> 


<view>{{object.subObject.objectText}}</view> 
<button bindtap="change0bjectText"> 修 改 对 象 数据 </button> 


<view>{{array[0].arrayText}}</view> 
<button bindtap="changeArrayText"> 修 改 数 组 数据 </button> 


<view>{{newField. newFieldText}}</view> 
<button bindtap="addNewData"> 添 加 新 字段 </button> 


Page( { 
data : { 
text : 'normal data', 
object : { 


Subobject : { 
objectText : 'object data' 


}, 
array : [ 
{ arrayText : 'array data' } 
] 
}, 


changeText : function() { 
this.setData( { 
/* 普通 索引 */ 
text : 'new normal data'’ 


} ); 


A 
changeObjectText : function() { 
this. SetDatal { 
/* 按 路 径 索引 */ 
'object.subObject.objectText' : 'new object data' 
} ); 
}, 
changeArrayText : function() { 
this.setData( { 
/* 按 路 径 索引 */ 
"array[0].arrayText' : "new array data' 


} ); 
addNewData : function() { 


this.setData( { 
/* 修改 一 个 已 绑 定 ， 但 未 在 data 中 定义 的 数据 */ 
'newField.newFieldText' : 'add new data' 


5. 页 面 生命 周期 


页 面 的 生命 周期 整体 关系 厦 页 面 视 图 层 线 程 和 页 面 逻 辑 层 线程 ， 
注册 页 面 时 ，Object 参 数 中 很 多 属性 都 是 生命 周期 钞 数 ， 这 些 函 数 的 
调用 和 页 面 生 命 妃 思 相关， 程序 视图 层 线 程 和 逻辑 层 线程 天 系 如 图 2-8 
所 未 
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图 2-8 ”Page 实例 的 生命 周期 


如 图 2-8， 线 程 局 动 后 视图 层 和 逻辑 层 相互 监听 ， 当 逻辑 层 线程 触 
发 onLoad、onShow 方 法 后 会 把 初始 数据 data 传 送 给 视图 层 线程 ， 视 图 
层 完成 第 一 次 泻 染 后 触发 逻辑 层 onReady 方 法 ， 代 表 页 面 已 经 准备 受 
当 ， 之 后 我 们 便 可 通过 setData 方 法 主动 触发 视图 层 泻 染 。 当 页 面 被 调 
往 后 台 时 ， 触 发 onHide 方 法 ， 这 时 逻辑 层 线程 并 没有 销毁 ， 我 们 仍然 
可 以 通过 代码 控制 视图 层 渲染 ， 只 是 可 能 不 会 在 界面 上 表现 出 来 。 当 
页 面 从 后 台 回 到 前 台 时 ， 和 触发 onShow 方 法 ， 最 后 当 页 面 销毁 时 ， 触 发 
onUnload 方 法 。 整 体 来 看 onLoad、onReady 和 onUnload 方 法 在 生命 周期 
中 只 会 调用 一 次 ， 生 命 周期 内 显示 、 隐 藏 页 面 都 是 触发 onShow 和 
onHide 方 法 ， 在 路 由 方式 中 ， 只 有 页 面 重 定向 和 页 面 返回 会 结束 当前 
页 面 生 命 周 期 ， 当 进入 一 个 已 加 载 的 页 面 时 只 会 触发 onShow 方 法 ， 不 
会 触发 onLoad 和 onReady 方 法 。 


2.4.3 ”页面 结构 文件 (WXML) 
WXML (WeiXin Markup Language) 是 框架 设计 的 一 套 标 记 语 言 ， 


用 于 演 染 界面 ，WXML 的 演 染 原理 和 React Native 思 路 一 致 ， 通 过 一 和 套 
标记 语言 ， 在 不 同 平台 被 解析 为 不 同 端的 泻 染 文件 ， 如 图 2-9 所 示 。 


WXML WXSS 


小 程序 框架 


Android 界面 IOS 界面 Web 昼 面 


图 2-9 界面 泻 染 示 意图 


从 岁 中 我 们 能 看 出 ，WXML 语 言 最 终 会 较 译 为 特 主 端 对 应 的 语 
， 所 以 WXML 中 所 使 用 的 标签 一 定 是 小 程序 定义 的 标签 ， 不 能 使 用 
目 定义 标签 ， 这 样 才 能 保证 页 面 能 被 正确 转译 。 使 用 微 信 开发 着 工具 
开发 时 ， 在 WwWXML 中 编写 一 些 HTML 标签 或 自 定义 标签 仍然 会 被 正常 


J 尼 


解 机 ， 这 会 给 开发 者 造成 一 种 小 程序 能 直接 文 持 HTML 标 签 的 误解 。 这 
是 因为 微 信 开发 者 工具 内 核 是 浏览 右 内 核 ， 同 时 小 程序 框架 并 没 对 
WXML 中 的 标签 和 WXSS 中 的 内 容 进 行 强 验 证 ， 所 以 HTML 和 CSS 能 
接 被 解析 ， 但 这 种 不 合法 的 WXML 在 手机 端 微 信 中 是 不 能 正常 显示 
的 。 开 发 过 程 中 我 们 一 定 要 拿 真 机 进行 测试 ， 保 证 程序 能 正常 运行 。 


WXML 具 有 数据 绑 定 、 列 表 渔 染 、 条 件 渔 染 、 模 板 、 事 件 等 能 


1. 数 据 绑 定 


小 程序 中 页 面 泻 染 时 ， 框 架 会 将 WXML 文 件 同 对 应 Page 的 data 进 行 
绑 定 ， 在 页 面 中 我 们 可 以 直接 使 用 data 中 的 属性 。 小 程序 的 数据 绑 定 使 
用 Moustache 语法 〈 双 大 括号 ) 将 变量 或 简单 的 运算 规则 包 起 来 ， 主 要 
有 以 下 几 种 泻 染 方式 。 

(1) 简单 绑 定 

简单 绑 定 是 指 我 们 使 用 Mustache 语 法 〈 双 大 括号 ) 将 变量 包 起 
来 ， 在 模板 中 直接 作为 字符 串 输出 使 用 ， 可 作用 于 内 容 、 组 件 属 性 、 


控制 属性 、 关 键 子 等 输出 ， 其 中 关键 子 输出 是 指 将 JavaScript 中 的 关键 
字 按 其 真 值 输出 。 


示例 代码 如 下 : 


<!-- 作为 内 容 --> 
<view>{{content}}</view> 


<!-- 作为 组 件 属性 - -> 
<view id="item-{{id}}" style="border:{{border}}"> 作 为 属 1 


<!- - 作为 控制 属性 - -> 


到 
斌 


生 泻 染 </view> 


<view wx:if="f{fshowContent}}"> 作 为 属性 泻 染 </view> 
<!-- 关键 字 --> 
<view>{{2}}</view> 
<checkbox checked="{{false}}"></checkbox> 
Page( { 
data : { 
border : 'solid 1ipx #000°', 
id : 1, 
content : ' 内 容 '， 
ShowContent : false 
} 
} ); 


运行 效果 如 图 2-10 所 示 。 
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图 2-10 ”简单 绑 定 演 染 效果 


组 件 属性 为 boolean 类 型 时 ， 不 要 直接 写 checked="false"， 这 样 
checked 的 值 是 一 个 false 的 字符 串 ， 转 成 boolean 类 型 后 代表 为 tue， 这 种 
情况 一 定 要 使 用 关键 字 输 出 : checked='"{{ffalse}j" 


(2) 运算 


在 {{}} 内 可 以 做 一 些 简 单 的 运算 ， 文 持 的 运算 有 三 元 运算 、 算 数 
运算 、 人 逻辑 判断 、 了 字符 串 运 算 ， 这 些 运 算 均 符合 JavaScript 运 算 规则 。 
我 们 利用 如 下 示例 为 大 家 展示 : 


<!-- 三 元 表达 式 - 
Siew>{f showcontent ? ' 显 示 文 本 ' : ' 不 显示 文本 '}}</view> 
算数 运算 符 

< num1I + i }}+1+ {{ num3 }} = ? </view> 


<!-- 字符 串 运 算 --> 
<view>{{ "name : " + name }}</view> 


<!-- 逻辑 判断 - -> 


<view>{{ num3 > 0 }}</view> 


数据 路 径 运算 - 
en myObject. i }} {{myArray[1]}}</view> 


Page( { 
data : { 
ShowContent : false, 
num1 : 1, 
num2 : 2， 
num3 : 3, 
name : "welixin'， 
myObject : { 
age : 12 
}, 
myArray : ['arr1i','arr2'] 
} 
} ); 


执行 后 界面 如 图 2-11 所 示 。 
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图 2-11 运算 示例 
(G3) 组 各 


data 中 的 数据 可 以 在 模板 再 次 组 合成 新 的 数据 结构 ， 这 种 组 合 冲 党 
在 数组 或 对 象 中 使 用 。 


数组 组 合 比较 简单 ， 可 以 直接 将 值 放 置 到 数组 某 个 下 标 下 : 


<view>{{ [myValue, 2, 3, 'stringtype'] }}</view> 
Page( { 
data : { 


myValue : 0 
} 
} ); 


最 终 页 面 组 合成 的 对 象 为 [0，2，3，'stringtype']° 


对 象 组 合 有 3 种 组 合 方式 ， 这 里 我 们 以 数据 注入 模板 为 例 。 
第 一 种 ， 直 接 将 数据 作为 value 值 进行 组 合 : 


<template is="testTemp" data="{{ name : myvaluel1, age : myvalue2 }}"></template> 


Page( { 
data : { 
myValue1 : 'valuel1', 
myValue2 : 'value2' 
} 
} ); 


最 终 组 合 出 的 对 象 为 {name: "value1'，age: 'value2'}。 


第 二 种 ， 通 过 “...” 将 一 个 对 象 展开 ， 把 key-value 值 拷贝 到 新 的 结构 


<template is="testTemp" 
data="{{ ...my0bj1, key5 : 5, ...my0bj2, key6 : 6 }}"> 
</template> 


Page( { 
data : { 
my0bj1 : 
key1 : 
key2 : 


~ 


}, 
myobj2 : 
key3 : 
key4 : 


~ 


Wm DP 


最 终 组 合成 的 对 象 为 {key1: 1，key2: 2，key5: 5，key3: 
key4: 4， key6: 6} 


第 三 种 ， 如 果 对 象 key 和 value 相 同 ， 可 以 只 写 key 值 : 


<template is="testTemp" data="{{ key1，Kkey2 }}"></template> 


Page( { 
data : { 
key1 : 1 
key2 : 2 
} 
} ); 


这 种 写法 最 后 组 合成 的 对 象 是 {keyl: 1，key2: 2} 


上 壕 3 种 方式 可 以 根据 项 目 灵 活 组 合 ， 要 注意 的 是 和 js 中 的 对 和 象 一 
样 ， 如 果 一 个 组 合 中 有 相同 的 属性 名 时 ， 后 面 的 属性 将 会 覆盖 前 面 的 


属性 ， 如 : 
<template is="testTemp" data="{{..myO0bj, key1 : 3}}"></tamplate> 
Page({ 
data : { 
key1 : 1, 
key2 : 2 
}); 


示例 中 key1 坪 重复 的 属性 ， 那 么 后 面 的 属性 将 会 履 兰 前面 的 属 


性 ， 最 终 组 合生 成 的 对 象 为 {key1: 3，key2: 2}。 
2. 条 件 泻 染 


(1) wx: 证 


除了 人 商 单 的 数据 绑 定 ， 我 们 单间 会 


季 各 会 使 用 逻辑 分 文 ， 这 时 候 可 以 使 
用 wx: f=”{ {判断 条 件 }}” 来 进行 条 件 泻 染 ， 当 条 件 成 立时 泻 染 该 代码 
块 : 


<view wx:if="{{showContent}}"> 内 容 </view> 


: false 


示例 中 view 代 码 块 将 不 会 泻 染 ， 只 有 当 showContent 的 值 为 tue 时 才 


和 普通 的 编程 语言 


JE 百 


一 样 ，WXML 也 文 持 wx:， elif 和 wx: else， 如 : 


<view wx:if="{{false}}">1</view> 


<view wx:elif="{{false}}">2</view> 
<view wx:else>3</view> 


示例 中 页 面 只 演 染 最 后 


个 <view/> ° WX: elif 和 wx: else 必 须 和 


wx: if 配 合 使 用 ， 否 则 会 导致 页 面 解析 出 错 ， 在 项 目 中 大 家 一 定 要 注 


上 肝 0 
VC 


(2) block wx: 证 


wx if 是 一 个 控制 属性 ， 可 以 添置 在 任何 组 件 标签 上 ， 但 如 果 我 们 
需要 包装 多 个 组 件 ， 又 不 想 影 
需 


想 影 响 布局 ， 这 时 就 需要 使 用 <block> 标 签 将 
要 包装 的 组 件 放置 在 里 面 ， 通 过 wx: if 作 判断 。<block/> 不 是 一 个 组 


件 ， 仅 仅 是 一 个 包 逆 元素， 页 面 浑 染 过 程 中 不 做 任何 瘟 染 ， 由 属性 欣 
制 ， 如 下 所 示 : 


<block wx:if="{{true}}"> 
<view>view 组 件 </view> 
<image/> 

</block> 


(3) wx: if 与 hidden 


除了 wx: if 组 件 ， 也 可 以 通过 hidden 属 性 控制 组 件 是 否 显 示 ， 开 发 
者 难免 有 疑问 ， 这 两 种 方式 该 怎样 取舍 ， 这 里 我 们 整理 了 两 种 方式 的 
区 别 : 


-wx: if 控制 是 否 演 染 条 件 块 内 的 模板 ， 当 其 条 件 值 切换 时 ， 会 触 
发 局 部 泻 染 以 确保 条 件 块 在 切换 时 销毁 或 重新 泻 染 。wx: 并 是 价 性 
的 ， 如 果 在 初始 泻 染 条 件 为 false 时 ， 框 染 将 什么 也 不 做 ， 在 条 件 第 一 
次 为 真 时 才 局 部 泻 染 。 


hidden 控 制 组 件 是 否 显 示 ， 组 件 始终 会 个 泻 染 ， 只 是 简单 控制 显 


示 与 隐藏 ， 并 不 会 触发 重新 演 染 和 销毁 。 


综合 两 个 温 染 流程 可 以 看 出 ， 由 于 wx: if 会 触发 框架 局 部 渔 染 过 
程 ， 在 频 索 切换 状态 的 场景 中 ， 会 产生 更 大 的 消耗 ， 这 时 尽量 使 用 
hidden; 在 运行 时 条 件 变动 不 大 的 场景 中 我 们 使 用 wx: 这， 这 样 能 保证 
页 面 有 更 高 效 的 泻 染 ， 而 不 用 把 所 有 组 件 都 泻 染 出 来 。 


3. 列 表演 染 
(1) wx: for 


组 件 的 wx: for 欣 制 属 性 用 于 明 历 数组， 重复 演 染 该 组 件 ， 通 历 过 
程 中 当前 项 的 下 标 变 量 名 默认 为 index， 数 组 当前 项 变量 名 默认 为 


item ， 如: 


<view wx:for="{{myArray}}"> 
{{index}}:{{item}} 
</view> 
Page( { 
data : { 
myArray : [ 'value1', 'value2' | 


} ); 


通过 汤 历 myArray， 页 面 泻 染 了 两 个 <view/>， 结 果 如 图 2-12 所 示 。 


(2) wx: forindex 和 wx: for-item 


index 、 item 变 量 名 可 以 通过 wx: for-index、wx: for-item 属 性 修 


改 ， 如 : 


<view wx:for="{{myArray}}" wx:for-index="myIndex" wx:for-item="myItem"> 
{{myIndex}}:{{myItem.name}} 


</view> 
Page( { 
data : { 
myArray : [ 
{ name : "Value1'” }, 
{ name : 'value2' } 
] 
} 
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图 2-12 ”列表 演 染 示例 1 


泻 染 结果 如 图 2-13 所 示 。 
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图 2-13 ”列表 渲染 示例 2 


普通 遍历 中 我 们 没 必 要 修改 index、item 变 量 名 ， 当 wx: for 航 套 使 
用 时 ， 就 有 必要 设置 变量 名 ， 避 免 变 量 名 冲突 ， 下 面 我 们 遍历 一 个 二 
维 数组 : 


<view wx:for="{{myArray}}" wx:for-index="myIndex" wx:for-item="myItem"> 
<block wx:for="{{myItem}}" wx:for-index="subIndex" wx:for-item="subItem" > 
{{subItem}} 
</block> 
</view> 


Page( { 
data : { 


myArray : [ 


演 染 效果 如 图 2-14 所 示 。 
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图 2-14 ”列表 渲染 示例 3 


在 本 示例 中 ， 我 们 使 用 了 <block/> 标 签 ， 和 block wx: 让 一 样 ， 
wx: for 可 以 直接 在 <block 放 标签 上 使 用 ， 以 渲染 一 个 包含 多 个 节点 的 


结构 块 。 


4. 模 板 


在 项 目 过 程 中 ， 营 第 会 遇 到 茶 些 相同 的 结构 在 不 同 的 地 方 反复 出 
现 ， 这 时 可 以 将 相同 的 布局 代码 片段 放置 到 一 个 模板 中 ， 在 不 同 的 地 
方 传 入 对 应 的 数据 进行 泻 染 ， 这 样 能 避免 重复 开发 ， 提 升 开 发 效率 。 


(1) 定义 模板 


定义 模板 非常 简单 ， 在 <template/> 内 定义 代码 片段 ， 设 置 
<template/> 的 name 必 性， 指定 模板 名 称 即 可 。 如 : 


<template name="myTemplate"> 
<view> 内 容 </view> 
<view>{{content}}</view> 
</template> 


(2) 使 用 模板 


使 用 模板 时 ， 设 置 is 属 性 指向 需要 使 用 的 模板 ， 设 置 data 属 性 ， 将 
模板 所 需 的 变量 传 入 。 模 板 拥有 自己 的 作用 域 ， 只 能 使 用 data 属 性 传 入 
的 数据 ， 而 不 是 直接 使 用 Page 中 的 data 数 据 ， 演 染 时 ，<template/> 标 签 
将 被 模板 中 的 代码 块 完全 替换 。 


示例 代码 如 下 : 


<template name="myTemplate"> 
<view> 内 容 </view> 


<view>{{content}}</view> 
<view>{{name}}</view> 
<view>{{my0bj.key1}}</view> 
<view>{{key2}}</view> 


</template> 
<template is="myTemplate" data="{{content : ' 内 容 '，name, my0bj, 
Page( { 
data : { 
name : 'myTemplate', 
myobj : { 
key1 : 'valuel' 
}, 
myobj2 : { 
key2 : 'value2' 
} 
} 
} ); 


执行 效果 如 图 2-15 所 示 。 


模板 可 以 舱 套 使 用 ， 如 下 所 未 : 


<template name="bTemplate"> 
<view>b tempalte content</view> 

</template> 

<template name="aTemplate"> 
<view>a template content</view> 
<template is="bTemplate"/> 

</template> 

<template is="aTemplate"/> 


.. .my0bj2}}"/> 
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图 2-15 ”模板 示例 


泻 染 结果 如 图 2-16 所 示 。 
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模板 is 属性 文 持 数据 绑 定 ， 在 项 目 过 程 中 我 们 可 以 通过 属性 绑 定 动 


态 决 定 使 用 哪个 模板 ， 如 : 


<template is="{{templateName}}" data="myData"/> 


5. 事 件 


WXML 中 的 事件 系统 和 HTML 中 DOM 事 件 系统 极其 相似 ， 也 是 通 
过 在 组 件 上 设置 “bind (或 catch) + 事件 名 ”属性 进行 事件 绑 定 ， 当 和 触发 
事件 时 ， 框 架 会 调用 逻辑 层 中 对 应 的 事件 处 理 函 数 ， 并 将 当前 状态 通 
过 参数 传递 给 事件 处 理 范 数 ， 由 于 小 程序 中 没有 DOMT 点 概念 ， 所 以 
事件 只 能 通过 WXML 绑 定 ， 不 能 通过 逻辑 层 动态 绑 定 。 官 方 对 WXML 
事件 的 定义 如 下 : 


-事件 是 视图 层 到 逻辑 层 的 通讯 方式 。 
-事件 可 以 将 用 户 的 行为 反馈 到 逻辑 层 进 行 处 理 。 


-事件 可 以 绑 定 在 组 件 上 ， 当 触发 事件 时 ， 就 会 执行 逻辑 层 中 对 应 
的 事件 处 理 函 数 。 


事件 对 象 可 以 携 囊 额外 信息 ， 如 id、dataset 、touches。 
(1) 事件 分 类 
事件 分 为 冒 泡 事件 和 非 冒 泡 事件 : 


冒 泡 事件 : 当 一 个 组 件 上 的 事件 被 触发 后， 该 事件 会 同 父 节 扩 传 
弟 。 


. 非 冒 泡 事件 : 当 一 个 组 件 上 的 事件 被 触发 
点 传递 。 
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有 有 前端 开 发 经 验 的 开发 者 应 该 对 事件 冒 泡 都 有 一 是 了 解 ， 当 一 个 
事件 被 触发 后 ， 该 事件 会 沿 该 组 件 向 其 父 级 对 象 传播 ， 从 里 到 外 依次 
执行 ， 直 到 节点 最 顶层， 这 个 是 个 非常 有 用 的 特性 ， 通 音 用 于 实现 事 
件 代 理 ， 具 体 实现 方案 将 在 下 文中 具体 讨论 。 


WXML 冒 泡 事件 如 下 : 

touchstart: 手指 触摸 动作 开始 。 

-touchmove: 手指 触摸 后 移动 。 

touchcancel: 手指 触摸 动作 被 打 断 ， 如 来 电 提醒 、 弹 窗 。 
-touchend: 手指 触摸 动作 结 

tap: 手指 触摸 后 马上 离开 。 


.longtap: 手指 触 措 后 ， 超 过 350ms 再 离开 。 


对 于 冒 泡 事件 每 个 组 件 都 是 默认 文 持 的 ， 除 上 述 事 件 之 外 的 其 他 
组 件 目 定 义 事 件 如 无 特殊 声明 都 是 非 冒 泡 事 件 ， 如 : <form/> 的 submit 
事件 ，<scroll-view/> 的 scrol 事 件 ， 详 细 信息 请 参考 各 组 件 文 档 。 


(2) 事件 绑 定 


在 之 前 内 容 中 ， 已 经 多 次 实现 事件 绑 定 ， 大 家 应 该 比较 熟悉 了 ， 
事件 绑 定 的 写法 和 组 件 的 属性 一 样 ， 以 key、value 形 式 组 织 。 


key: 以 bind 或 catch 开 头 ， 然 后 跟 上 事件 类 型 ， 字 母 均 小 写 ， 如 : 


bindtap, catchtouchstart ° 


value: 事件 函数 名 ， 对 应 Page 中 定义 的 同名 函数 。 找 不 到 同名 函 


数 会 导致 报错 。 


绑 定 时 bind 事 件 绑 定 不 会 阻止 冒 泡 事件 同上 冒 泡 ，catch 事 件 绑 定 
会 阻止 冒 移 事 件 网 上 冒 泡 。 


冒 泡 示例 如 下 : 


<view bindtap='"tap1"> 
View1 
<view catchtap="tap2"> 
View2 
<view bindtap="tap3"> 
View3 
</view> 
</view> 
</view> 


如 上 述 示 例 中 ， 点 击 vView3 时 会 先后 触发 tap3 和 tap2 事 件 ， 由 于 
view2 通 过 catch 阻 上 上 了 tap 事 件 冒 泡 ， 这 时 tap1 将 不 会 执行 ， 点 击 view2 
只 触发 ttp2， 点 击 view1 只 触发 tap1。 


(3) 事件 对 象 


如 有 果 没 有 特殊 说 明 ， 当 组 件 触 发 事件 时 ， 
件 处 理 函 数 会 收 到 一 个 事件 对 象 ， 如 : 


<view bindtap="myevent">view</view> 
Page( { 


myevent : function( e ) { 
console.log( e ) 


} 
} ); 


. 


上 述 代 码 中 ，myevent 参 数 e 便 是 事件 对 象 ， 
定 特别 像 。 上 壕 代 码 执行 后 事件 对 象 输出 如 下 : 


{ 
"type" H "tap", 
"timeStamp":6571, 
"target":{ 
jd . ey 
"offsetLeft":0, 
"offsetTop":0, 
"dataset":{ 
} 
}, 
"currentTarget":{ 
rid" e 二 
"offsetLeft":0, 
"offsetTop":0, 
"dataset":{ 
} 
}, 
"detail":{ 
x "15; 
"y" :11 


}, 
"touches":[ 


"identifier":0, 
"pageX":15, 
"pageY" :11， 
"clientX":15, 
"clientY":11 

} 


], 
"changedTouches": 


"identifier":0, 
"pageX":15, 
"pageY" :11， 
"clientX":15, 
"clientY":11 


心 


逻辑 层 绑 定 该 事件 的 事 


这 和 JavaScript 事 件 绑 


事件 对 象 属 性 基本 可 分 为 三 类 : BaseEvent、CustomEvent、 


TouchEvent ° 


BaseEvent 为 基础 事件 对 象 属性 ， 包 括 : 
-type: 事件 类 型 。 


timeStamp: 事件 生成 时 的 时 间 玲 ， 页 面 打 开 到 触发 所 经 过 的 过 秘 


target: 触发 事件 源 组 件 〈 即 置 泡 开始 的 组 件 ) 的 相关 属性 集合 ， 
属性 如 下 : 


id: 事件 源 组 件 的 id 。 

tagName: 事件 源 组 件 的 类 型 。 

-dataset: 事件 源 组 件 上 由 data- 开 头 的 目 定义 属性 组 成 的 集合 。 
currentTarget: 事件 绑 定 的 当前 组 件 的 相关 属性 集合 ， 属 性 如 下 : 
id: 当前 组 件 的 id 。 


tagName:， 当前 组 件 的 类 型 。 


-dataset: 当前 组 件 上 由 data- 开 头 的 目 定义 属性 组 成 的 集合 


<canvas/> 中 的 触 措 事件 不 可 冒 泡 ， 所 以 没有 currentTarget 。 


dataset 是 组 件 的 目 定 义 数 据 ， 通 过 这 种 方式 可 以 将 组 件 的 日 定义 属 
性 传递 给 逻辑 层 。 书 写 方式 为 : 以 data- 开 头 ， 多 个 单词 由 连 字 符 僵 " 连 
接 ， 属 性 名 不 能 有 大 写 (大 写 最 终 会 被 转 为 小 写 ) ， 最 终 在 dataset 中 将 
字符 转 成 狠 峰 形式 ， 如 ; 


<view bindtap="myevent" data-my-name="weixin" data-myAge="12"> 
dataset 示例 
</view> 


Page( { 
myevent : function( e ) { 
console.log( e.currentTarget.dataset ); 


} 
} ); 

最 后 dataset 打 印 出 来 为 : 
{ 

"myName"” : "weixin"，// 连 字 符 被 转 成 驼峰 
, "myage" : "12" // 所 有 大 写字 符 都 被 转 为 小 写 


CustomEvent 为 自 定义 事件 对 象 (继承 BaseEvent) ， 只 有 一 个 属 


detail: 额外 信息 ， 通 闻 传 递 组 件 特殊 信息 。 


detail 没 有 统一 的 格式 ， 在 <form/> 的 submit 方 法 中 它 是 {"value": 
{}，"formId": ""}， 在 <swiper/> 的 change 事 件 中 它 是 {"current": 


current} ， 具 体内 容 参 考 组 件 相关 文档 。 


TouchEvent 为 触摸 事件 对 象 (继承 BaseEvent) 属性 如 下 所 示 : 


-touches: 触摸 事件 ， 当 前 停留 在 屏幕 中 的 触摸 点 信息 的 数组 。 


:changedTouches: 触摸 事件 ， 当 前 变化 的 触摸 点 信息 的 数组 ， 如 
从 无 变 有 (touchstart) 、 位 置 变化 (touchmove) 、 从 有 变 无 


(touchend 、touchcancel) 。 


由 于 支持 多 点 触摸 ， 所 以 touches 和 changedTouches 都 是 数组 格式 ， 
每 个 元 素 为 一 个 Touch 对 象 (canvas 触 摸 事 件 中 为 CanvasTouch 对 和 象 ) 。 


Touch 对 象 相 关 属 性 如 下 : 
identifier: 触摸 点 的 标识 符 。 


:pageX，pageY: 距离 文档 左上 角 的 距离 ， 文 档 的 左上 角 为 原点 ， 
横 回 为 X 轴 ， 纵 回 为 Y 轴 。 


clientX，dlientY: 距离 页 面 可 显示 区 域 (屏幕 除去 导航 条 ) 左上 
角 的 距离 ， 横 向 为 X 轴 ， 纵 向 为 Y 轴 。 


CanvasTouch 对 象 相 关 属 性 如 下 : 


identifier: 触摸 点 的 标识 符 。 


X，y: 距离 Canvas 左 上 和 角 的 距离 ，Canvas 的 左上 角 为 原点 ， 横 向 
为 X 轴 ， 纵 辣 为 Y 轴 。 


6. 引 用 


一 个 WXML 可 以 通过 import 或 include 引 入 其 他 WXML 文 件 ， 两 种 
方式 都 能 引入 WXML 文 件 ， 区 别 在 于 import 引 入 WXML 文 件 后 只 接受 
模板 的 定义 ， 忽 略 模板 定义 之 外 的 所 有 内 容 ， 而 且 使 用 过 程 中 有 作用 
域 的 概念 。 与 import 相 反 ，include 则 是 引入 文件 中 除 <template/> 以 外 的 
代码 直接 拷贝 到 <include/> 位 置 ， 整 体 来 说 import 是 引入 模板 定义 ， 
include 是 引入 组 件 。 


(1) import 


<import/> 的 src 属 性 是 需要 被 引入 文件 的 相对 地 址 ，<import/> 引 入 
会 忽略 引入 文件 中 <template/> 定 义 以 外 的 内 容 ， 如 下 例 中 ， 在 a.wxml 引 
入 b.wxml，b.wxml 中 <view/> 和 <template is="bTemplate"/> 都 被 包 略 ， 仅 
引入 了 模板 的 定义 ， 在 a.wxml 中 能 使 用 b.wxml 中 定义 的 模板 : 


<import src="b.wxm]l"/> 
<template is="bTemplate" data=""/> <!-- 使 用 b.wxml 中 定义 的 模板 - -> 


<View> 内 容 </view> <!-- import3 引 用 时 会 被 忽略 - -> 

<template name="bTemplate"> 
<view>b template content</view> 

</template> 

<template is="bTemplate"/> <!-- import 引 用 时 会 被 忽略 ”--> 


上 述 代 码 中 ，a.wxml 中 的 <view/> 并 没有 被 泻 染 ， 如 图 2-17 所 示 。 
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图 2-17 ”import 示 例 1 


import 引 用 有 作用 域 概念 ， 只 能 直接 使 用 引入 的 定义 模板 ， 而 不 能 
使 用 间接 引入 的 定义 模板 ， 如 下 例 ， 在 a.wxml 中 引入 b.wxml，b.wxml 
再 引入 c.wxml， 这 样 a 能 直接 使 用 bp 中 定义 的 模板 ，b 能 使 用 c 中 定义 的 模 
板 ， 但 a 不 能 使 用 c 中 的 模板 : 


<import src="b.wxml"/> 
<template is="bTemplate"/> 
<template is="cTemplate"/> <!-- 不 能 直接 调用 c .wxml 中 的 模板 ”--> 


<import src="c.wxml"/> 
<view>b content</view> <!-- import 时 被 忽略 --> 
<template name="bTemplate"> 


<template is="cTemplate"/> 
<view>b tempalte content</view> 
</template> 
<template is="cTemplate"/> <!-- import 时 被 忽略 --> 


<template name="cTemplate"> 
<view>c template content</view> 
</template> 


演 梁 效果 如 图 2-18 所 示 。 


微 信 开发 者 工具 0.10.101400 XxX 
iPhone 4s wifi [RK | Wxml » 
bp A 
WeChat 


c temlate content 
b temalte content 


Console | 


© YY top 


图 2-18 ”import 作 用 域 示 例 


(2) include 


include 引 入 会 将 模板 定义 标签 外 的 内 容 〈 含 模板 使 用 标签 ) 直接 
赋值 蔡 换 <include/>， 我 们 基于 上 个 案例 进行 修改 ， 大 家 对 比 一 下 : 


<include src="b.wxml"/> 


b .wxml 中 的 模板 ”- -> 
c .wxml 中 的 模板 --> 


<template is="bTemplate"/> <!-- 不 能 i 
<template is="cTemplate"/> <!-- 不 能 i 


<include src="c.wxml"/> 
<view>b content</view> <!-- 不 会 被 忽略 --> 


<template name="bTemplate"> 
<template is="cTemplate"/> <!-- 不 会 调用 c .wxml 中 的 模板 ，3 引 用 时 已 被 忽略 - -> 
<view>b tempalte content{{name}}</view> 
</template> 


t 


<template is="bTemplate" data="{{name}}"/> <!-- 没有 被 忽略 ， 能 正常 调 ,文件 中 的 模板 - 


-> 


<template name="cTemplate"> 
<view>c template content</view> 
</template> 


Page( { 
data : { 
name : '2' /* 能 将 数据 注入 到 b .wxml 中 */ 
} 
} ); 


运行 效果 如 图 2-19 所 示 。 
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图 2-19 include 引入 示例 


通过 对 比 发 现 ，import 更 适合 引用 模板 定义 文件 ，include 更 适合 引 
入 组 件 文件 ， 在 项 目 中 大 家 可 以 根据 特性 灵活 使 用 。 


WXML 虽 然 是 一 门 新 标签 语言 ， 但 大 部 分 规则 和 其 他 前 端 模板 语 
言 大 同 小 异 ， 本 了 WXML 规 则 整体 可 分 为 数据 绑 定 ， 事 件 机 制 ， 模 板 
语法 (条 件 渲染 、 列 表演 染 ) ， 页 面 引用 《引用 规则 、 模 板 ) ， 大 家 
可 以 对 比 其 他 模板 语言 学 习 。 


2.4.4 ”页 面 样式 文件 (WXSS) 


WXSS (WeiXin Style Sheets) 是 基于 CSS 拓 展 的 样式 语言 ， 用 于 摘 
述 WXML 的 组 件 样式 ， 决 定 WXML 的 组 件 该 怎么 显示 ， 它 具有 CSS 的 
大 部 分 特性 ， 在 CSS 基 础 上 WXSS 拓 展 了 尺寸 单位 、 样 式 导 入 特性 ， 对 
CSS 选 择 器 属性 上 做 了 部 分 兼容 ， 目 前 官方 文档 没有 给 出 WXSS 具 体 具 
备 CSS 哪 些 特性 ， 在 开发 过 程 中 不 能 想当然 地 使 用 CSS 属 性 ， 一 定 要 使 
用 iOS 和 Android 真 机 进行 调试 ， 本 小 节 主 要 讲述 WXSS 和 CSS 的 不 同 
点 ， 后 续 布 局 章 市 会 讲解 CSS 盒 子 模型 布局 相关 属性 ， 其 余 CSS 属 性 大 
家 可 以 参考 W3C 规 范 ， 在 WXSS 中 我 们 甚至 能 使 用 一 些 兼容 性 写法 ， 
不 过 在 开发 过 程 中 我 们 一 定 要 开启 开发 者 工具 中 “开启 上 传代 码 时 样式 
文件 自动 补 全 ”功能 ， 这 样 小 程序 会 自动 补 全 其 余 一 些 样 式 的 兼容 性 写 
法 ， 保 证 在 不 同 终端 达到 统一 视觉 效果 。 


1. 尺 寸 单 位 


CSS 中 原 有 尺寸 单位 在 不 同 尺寸 屏幕 中 不 能 完美 实现 元 素 按 比例 缩 
放 ，WXSS 在 此 基础 上 拓展 了 两 种 尺寸 单位 : rpx (responsive pixel) 和 
rem (root em) ， 这 两 种 尺寸 单位 都 是 相对 单位 ， 最 终 会 被 换算 成 px， 
使 用 rpx 和 和 rem 布局 页 面 能 让 页 面 界 面 在 不 同 尺 寸 屏 幕 中 按 比例 缩放 。 


(1) rpx 


在 泻 染 过 程 中 rpx 会 按 比 例 转化 为 px，WXSS 规 定 屏幕 宽 度 为 
750rpx， 如 在 iPhone6 中 ， 屏 幕 宽 度 为 375px， 即 750rpx=375px， 那 么 在 
iPhone6 中 1rpx=0.5pX。 


(2) rem 


同 rpx 一 样 ，WXSS 规 定 屏 幕 宽度 为 20rem， 同 样 在 iPhone6 中 ， 屏 
幕 宽 上 度 为 375px， 即 20rem=375px， 所 以 在 iPhone6 中 1rem=18.75px 。 


以 钊 规 设备 为 例 ， 这 些 矿 二 换算 如 表 2-1 所 示 。 


表 2-1 rpx、rem 与 px 换算 天 子 示 例 


设备 px 换算 rpx rem 换算 px px 换算 rem 
(屏幕 宽度 /750 ) ( 750/ 屏幕 宽度 ) (屏幕 宽度 /20 ) ( 20/ 屏幕 宽度 ) 
iPhone6 Plus lrpx=0.552px lpx=0.04830..px 


在 设计 和 界面 时 ， 如 果 要 实现 尺寸 目 适 应 ， 设 计 师 可 以 用 iPhone6 作 
为 视觉 标准 。 由 于 rpx 和 rem 了 最 终 要 被 换算 为 px， 在 某 些 情况 下 可 能 会 
存在 除 不 尽 的 情况 ， 会 导致 界面 中 产生 毛刺 ， 这 种 情况 大 家 要 多 留 
意 、 多 测试 以 尽量 避免 这 种 情况 。 


2. 选 择 器 


CSS 选 择 器 用 于 选择 需要 添加 样式 的 元 素 ，WXSS 实 现 了 CSS 的 部 
分 选择 器 ， 使 用 规则 和 CSS 一 样 ， 熟 悉 CSS 的 同学 会 很 快 上 手 ， 参 见 表 


表 2-2 ”选择 硕 样 例 


选择 器 样 例 描述 
.class 选择 所 有 拥有 class="myClassName" 的 组 件 
#id 选择 拥有 id="myIdName" 的 组 件 
element 选择 所 有 view 组 件 
element, element 选择 所 有 文档 的 view 组 件 和 所 有 checkbox 组 件 
::after 在 view 组 件 后 边 插 入 内 容 
:before 在 view 组 件 前 面 插入 内 容 


WXSS 和 和 CSS 代码 结 构 一 样 ， 一 上段 样 式 前 面 是 选择 絮 ， 后 面 是 以 大 
括号 括 起 来 的 样式 组 合 ， 每 个 样式 以 分 号 结束 ， 如 下 所 示 : 


选择 器 { 样式 1; 样式 2; 】} 


选择 右 使 用 规则 和 CSS 也 是 一 致 的 ， 如 下 所 示 : 


/* 选择 所 有 class 含 有 myClass 的 组 件 ， 并 设置 边框 */ 
.myClass { border : solid 1px #000; } 


/* 选择 所 有 view 组 件 且 class 含 有 myClass 的 组 件 ， 并 设置 边框 */ 
view.myClass { border : solid 1px #000; } 


/* 选择 所 有 view 组 件 中 子 节点 class 含 有 myClass 的 组 件 ， 并 设置 边框 */ 
View .myClass { border : solid 1px #000; } 


* 


选 所 有 class 含 有 myContent 组 件 中 所 有 checkbox 组 件 和 radiobox 组 件 ， 并 设置 它们 的 边框 
Wh 


.myContent checkbox, 
.myContent radiobox { boder : solid 1px #000; } 


/* 选择 所 有 view 组 件 且 class 含 有 myClass 的 组 件 ， 在 其 后 面 插入 新 内 容 ， 内 容 为 new content*/ 
view.myClass::after { content : 'new content' } 


3. 内 联 样式 


同 HTML 一 样 ， 样 式 除 了 写 在 WXSS 文 件 中 ， 也 可 以 通过 设置 
style、class 属 性 控制 样式 ， 一 般 静 态 样式 可 以 统一 写 到 class 中 ，style 样 
式 会 在 运行 时 解析 ， 如 非特 别 需 要 ， 尽 量 避 免 将 静态 样式 写 入 style， 
以 免 影 响 演 染 速 度 ， 例 如 ; 


<!-- 通过 style 动 态 设置 样式 --> 
<view style="border:solid 1px #000;background-color:{{color}}"></view> 
<!- 通过 class 选 择 器 设置 样式 


-> 
<view class="myClassName1 myClassName" ></view> 


4. 样 式 导 入 


通常 在 项 目 中 为 了 便于 管理 会 将 WXSS 按 职责 拆 分 为 多 个 文件 ， 这 
时 便 需 要 @import 语 句 在 当前 WXSS 文 件 中 导入 其 他 WXSS 文 件 ， 
@import 后 写 入 需要 导入 WXSS 文 件 的 相对 路 径 ， 用 “; ”表示 语句 结 
束 ， 例 如 : 


.Ccommon-view { border : solid 1px #000; } 


@import "common.wxss"; 
.page-container { padding : 10px; } 


至 此 ， 小 程序 框架 页 面相 关 的 4 个 文件 已 介绍 完成 ， 大 家 对 每 个 文 
件 的 功能 、 内 容 应 该 都 有 了 一 定 了 解 ， 在 本 章 最 后 一 节 中 ， 我 们 将 探 
讨 小 程序 的 模块 化 。 


2.5 模块 化 


小 程序 逻辑 层 语言 是 JavaScript， 而 JavaScript 作 为 脚本 语言 在 设计 
初期 仅 是 为 了 实现 简单 的 页 面 交 互 ， 由 Brendan Eich 在 1995 年 花 了 不 到 
十 天 时 间 发 明 出 来 ， 语 言 本 身 缺 失 了 很 多 用 于 支撑 大 型 项 目的 设计 ， 
而 现在 前 端 业 务 逻 辑 越 来 越 复 杂 ， 代 码 也 越 来 越 多 ， 很 多 问题 就 暴露 
出 来 。 模 块 化 主要 解决 JavaScript 中 命名 冲突 和 文件 依赖 这 两 个 问题 ， 
现在 模块 化 在 前 端 中 使 用 比较 广泛 ， 如 Nodejs 、 Requirejs 、Seajs 、 
Webpack 等 ， 它 们 大 部 分 都 遵循 或 者 接近 CommonJS 规 范 ， 甚 至 ES6 也 
针对 模块 化 提出 了 自己 的 规范 。 目 前 前 端 模块 化 没有 一 个 统一 的 解决 
方案 ， 在 不 同 环 境 、 不 同 框架 中 的 实现 都 不 一 样 ， 本 节 将 重点 讨论 小 
程序 的 模块 化 规范 。 


2.5.1 模块 化 简介 


最 早 前 端 JavaScript 代 人 码 量 不 大 ， 统 一 放 在 一 个 文件 内 ， 如 下 面 一 
段 代码 : 


var name = 'weixin', 
age = 


function getName() { 
// 实现 代码 


} 
function getAge() { 
// 实现 代码 


后 来 前 端 代码 越 来 越 多 ， 为 了 便于 管理 和 工作 拆 分 ， 我 们 不 得 不 
把 代码 拆 分 为 多 个 文件 ， 这 时 将 上 述 代码 封 狼 到 user.js 文 件 中 ， 需 要 用 
时 引入 页 面 (或 打包 到 一 个 文件 ) 就 行 。 初 期 团队 成 员 少 ， 一切 都 运 
行 正 钊 ， 直 到 团队 越 来 越 大 ， 开 始 有 人 抱怨 : 我 想 定义 一 个 name 变 量 
但 userjs 中 已 经 存在 ， 我 不 得 不 定义 为 nyName; 为 什么 我 在 目 己 代码 
中 定 了 getAge 方 法 束 导 人 致 别人 代码 出 问题 了 呢 ? 通过 这 种 文件 拆 分 的 
工作 我 们 只 是 对 代码 做 了 物理 上 的 分 离 ， 能 初步 实现 多 人 开发 和 简单 
的 代码 管理 ， 但 并 没有 真正 做 到 作用 域 的 隔离 ， 由 于 不 知道 其 他 文件 
内 已 存在 的 变量 名 ， 甚 至 让 全 局 冲突 问题 变 得 更 容易 、 更 严重 。 


再 后 来 为 了 避免 这 种 全 局 冲突 ， 大 家 决定 参考 Java 的 方式 ， 引 入 
命名 空间 和 闭 包 来 解决 变量 冲突 问题 。 于 是 userjs 里 的 代码 变 成 了 如 下 


这 样 : 


( function() { 
myProject = myProject || 位 ; // 定义 全 局 命名 空间 
myProject.user = { 人 7 
myProject.user.name = 'weixin' 


var age = 12; // 闭 包 内 变量 ， 外 部 不 能 访问 


myProjecct.user.getName = function() { 
// 实现 代码 


myProject.user.getAge = function() { 
// 实现 代码 


} 
} )(0); 


这 样 别 的 同事 可 以 通过 myProjectuser 获 取 name， 调 用 getName 和 
getAge 方 法 ， 通 过 命名 空间 ， 的 确 能 缓解 大 部 分 冲突 ， 但 是 为 此 我 们 
不 得 不 记 住 很 长 一 串 命名 空间 ， 同 时 当 我 使 用 user 这 个 空间 后 ， 别 人 
就 不 能 使 用 ， 这 也 不 能 完美 地 解决 问题 。 同 时 更 可 怕 的 是 如 果 userjs 依 
赖 男 外 一 个 utils.js， 别 的 同事 必须 通过 阅读 userjs 源 码 搞 慌 这 层 依 赖 天 
系 ， 按 顺序 引入 utils.js、userjs， 直 接 引 入 userjs 将 会 导致 他 代码 出 
错 ， 如 果 utils 还 依赖 别 的 资源 他 还 得 必须 搞 民 相关 的 所 有 依赖 ， 而 他 
仅仅 是 想 调 用 我 的 getrName 方 法 ， 这 对 调用 的 同事 来 说 无 疑 是 个 囊 

这 时 我 们 需要 一 种 新 的 组 织 方式 ， 于 是 诞生 了 模块 化 : 


模块 是 一 段 JavaScript 代 码 ， 具 有 统一 的 基本 书写 格式 。 


-模块 之 间 通 过 基本 交互 规则 ， 能 彼此 引用 ， 协 同 工 作 。 


目前 模块 化 的 规范 不 统一 ， 大 致 可 分 为 CommonJS 和 ES6 两 种 规 
范 ， 大 家 有 兴趣 可 以 参考 网 上 相关 资料 ， 小 程序 模块 化 机 制 比较 接近 
CommonJS 规 范 ， 无 论 哪 种 规范 ， 学 习 起 来 都 十 分 简单 。 


2.5.2 ”文件 作用 域 


小 程序 中 一 个 JavaScript 文 件 就 是 一 个 模块 ， 在 这 个 文件 中 声明 的 
变量 和 男 数 只 在 该 文件 中 有 效 ， 不 同文 件 中 的 相同 变量 名 和 函数 名 是 
不 会 互相 影响 的 。 模 块 中 可 以 调用 一 些 全 局 的 方法 ， 如 下 例 中 通过 调 
用 getApp () 获取 小 程序 实例 : 


App( { ee 
myGlobalData : { /* 定义 全 局 属性 */ 
name : 'weixin' 
} 
} ); 
var myPrivatyData = "value1"; /* myPrivatyData 只 能 在 a.js 中 使 用 */ 


var appData = getApp(); 
appData.myGlobalData.name += ' app'; 


var myPrivatyData = "value2"; /* myPrivatyData 不 会 和 a.js 中 同名 变量 冲突 */ 
Var ,appData = = getApp(); 
/* 当 a.,js 在 b,js 前 执行 后 ， 这 里 会 输出 "weixin app value2" */ 

console.log( appData.myGlobalData.name + ' ' + myPrivatyData ); 


2.5.3 ”模块 的 使 用 


模块 接口 的 暴露 和 3 引入 十 分 简单 : 
.通过 exports 和 又 露 接口 。 


.通过 require (path) 引入 依赖 ，path 是 需要 引入 的 模块 文件 的 相对 


示例 代码 如 下 : 


var privateData = 'weixin'; 


function run( who ) { 
console.log( who + ' run' ); 


function walk( who 
console.log( who + ' walk' ); 


module.exports.run = run; 
exports.walk = walk; 


7 ** 
也 可 以 这 样 
module.exports = { 
run : run, 
walk : walk 


了 


*/ 
Var otherMod = require( 'mod.js' ); /* */ 


Page( { 
onShow : a { 
/* 这 里 会 打印 出 somebody run */ 
otherMod .run( 'somebody' ); 
/* 这 里 会 打印 出 somebody walk */ 
otherMod.walk( 'somebody' ); 


} 
} ); 


需要 注意 的 是 : 


-exports 是 module.exports 的 一 个 引用 ， 因 此 在 模块 里 面 随意 更 改 
exports 的 指 问 会 造成 未 知 的 错误 。 所 以 我 们 更 推荐 开发 者 采用 
module.exports 来 又 露 模块 接口 ， 除 非 你 已 经 很 清晰 地 知道 这 两 者 的 天 
系 o 


.小 程序 目前 不 文 持 直接 引入 node_modules， 开 发 者 需要 使 用 
node_modules 时 建议 拷贝 出 相关 代码 到 小 程序 目录 中 。 


通过 模块 化 我 们 能 实现 代码 真正 的 隔离 ， 可 以 多 人 并 行 开 发 ， 降 
低 大 型 项 目 管理 难度 ， 这 对 前 端 工程 化 具有 很 大 促进 作用 。 


2.5.4 其 他 


1.JavaScript 运 行 环境 


微 信 小 程序 逻辑 代码 运行 在 三 端 ， iOS、Android 和 用 于 调试 的 开 
发 者 工具 ， 这 三 端 是 各 目 不 同 的 三 个 解析 引擎 : 


.在 iOS 上 ， 小 程序 的 JavaScript 代 码 是 运行 在 JavaScriptCore 中 。 
.在 Android 上， 小 程序 的 JavaScript 代 码 是 通过 X5 内 核 来 解析 。 


:在 开发 工具 上 ， 小 程序 的 JavaScript 代 人 码 是 运行 在 nwjs (chrome 内 
核 ) 中 。 


虽然 尽管 三 端的 环境 十 分 相似 ， 但 是 至 少 在 目前 对 一 些 语法 、 特 
性 的 支持 还 是 有 一 些 区 别 ， 在 开发 过 程 中 要 尽 可 能 地 在 三 端 进行 测 
试 。 


2.ES6 语 法 以 及 API 支 持 


在 小 程序 中 ， 开 发 者 可 以 使 用 ES6 语 法 进行 编码 ， 在 0.10.101000 
以 及 之 后 版 本 的 开发 工具 中 ， 会 默认 使 用 babel 将 开发 者 ES6 代 码 转换 
为 三 端 都 能 很 好 支持 的 ES5 的 代码 ， 帮 助 开发 者 解决 环境 不 同 所 带 来 


的 开发 问题 。 如 条 没有 使 用 ES6 语 法 ， 开 发 者 可 以 在 项 目 设置 中 关闭 
这 个 功能 。 


转化 过 程 中 需要 注意 : 


.这 种 转换 只 会 帮助 开发 者 处 理 语法 上 问题 ， 狐 的 ES6 的 API， 例 如 
Promise 等 需要 开发 者 上 自行 引入 Polyfill 或 者 别 的 类 库 。 


.为 了 提高 代码 质量 ， 在 开启 ES6 转 换 功 能 的 情况 下 ， 默 认 局 用 
JavaScript 严 格 模式 ， 请 参考 “use strict” 


26 人 小结 


小 程序 框架 是 小 程序 开发 的 核心 ， 本 章 重 点 讲解 了 框架 的 大 致 原 
理 、 规 范 ， 痢 析 了 所 涉及 的 每 个 文件 ， 小 程序 这 种 基于 数据 的 编码 方 
式 和 前 端 基于 DOM 的 编码 方式 有 很 大 不 同 ， 大 家 要 着 重 了 解 熟悉 ，J 了 
解 小 程序 运行 原理 后 ， 后 续 学 习 组 件 和 API 将 会 非常 简单 。 


第 3 章 ”布局 


WXSS 实 现 了 CSS 布 局 相关 的 大 部 分 规范 ， 但 在 一 些 细 季 上 有 差 
异 ， 甚 至 同样 的 语法 在 小 程序 调试 工具 和 微 信 中 的 表现 也 存在 差异 。 
本 章 主要 讲述 CSS 布 局 相关 的 一 些 基 本 知识 ， 包 括 经 典 的 盒子 模型 、 
浮动 定位 、 绝 对 定位 以 及 近 几 年 提出 的 Flex 布 局 。 这 些 基 本 知识 在 
WXSS 也 是 通用 的 。 对 于 其 他 一 些 特性 ， 开 发 者 可 在 开发 过 程 中 党 
试 ， 如 果 大 家 想 对 CSS 有 更 深 的 了 解 可 以 参考 网 络 资料 或 《CSS 权 威 
指南 》。 这 里 再 次 提醒 大 家 ， 在 代码 编写 过 程 中 一 定 要 开启 开发 者 工 
具 中 的 这 个 功能 : “开启 上 传代 码 时 样式 文件 自动 补 全 ”"， 否 则 在 学 习 
本 章 Flex 布 局 时 会 存在 不 同 终端 兼容 性 问题 。 


3.1 基本 知识 


3.1.1 盒子 模型 


盒子 模型 是 CSS 布 局 的 基础 ，CSS 假 定 每 个 元 素 都 会 生成 一 个 或 多 
个 矩形 框 ， 每 个 元 素 框 中 心 都 有 一 个 内 容 区 (content) ， 这 个 内 容 区 
周围 有 内 边 距 (padding) 、 边 框 (border) 和 外 边 距 (margin) ， 这 些 
项 默认 筑 度 为 0， 这 个 矩形 框 就 是 常 说 的 盒子 模型 ， 如 图 3-1 所 示 。 


简单 来 说 ，HTML 中 每 一 个 元 素 就 是 一 个 盒子 ， 同 理 ， 在 小 程序 中 
每 一 个 组 件 就 是 个 盒子 ， 元 素 的 宽度 、 高 度 就 是 内 容 区 域 宽度 、 高 
度 ， 不 包含 内 边 距 、 边 框 和 外 边 距 ， 我 们 可 以 通过 元 素 width 、height、 
padding、border、margin 属 性 控制 盒子 样式 。 盒 子 模型 根据 浏览 器 具体 
实现 可 分 为 W3C 的 标准 盒子 模型 和 于 盒子 模型 ， 这 两 种 盒子 模型 在 宽 
度 和 高 度 的 计算 上 不 一 致 ， 正 盒子 模型 的 宽度 和 高 度 是 包含 内 边 距 和 
边框 的 ， 我 们 这 里 讲述 的 主要 是 W3C 的 盒子 模型 ，WXSS 完 全 遵守 


W3C 盒 子 模型 规范 。 
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图 3-1 盒子 模型 


CSS 中 的 布局 都 症 基 于 盒子 模型 ， 不 同类 型 元 素 对 盒子 模型 的 处 理 
也 是 不 同 的 ， 块 级 元 素 的 处 理 束 和 行内 元 素 不 同 ， 浮 动 元 素 和 定位 元 
素 的 处 理 也 是 不 相同 的 ， 接 下 来 我 们 逐一 讨论 这 些 夸 异 。 


3.1.2” 块 级 元 素 


元 素 按 显示 方式 主要 可 以 分 为 块 级 元 素 和 行内 元 素 ， 元 素 的 显示 
方式 是 由 display 属 性 控制 的 ， 块 级 元 素 会 默认 占 一 行 高 度 ， 一 般 一 行 
内 只 有 一 个 块 级 元 素 (浮动 后 除外 ) ， 当 再 添加 新 的 块 级 元 素 时 ， 新 
元 素 会 目 动 换 行 显示 。 块 级 元 素 一 般 作 为 容器 出 现 ， 用 于 组 织 结构 。 
一 些 元 素 默认 就 是 块 级 元 素 ， 如 小 程序 中 的 <view/> 组 件 ， 而 一 些 则 上 默 
认 是 行内 元 素 ， 我 们 可 以 通过 修改 元 素 display 属 性 为 block， 将 一 个 元 
素 强制 设置 为 块 级 元 素 。 一 个 块 级 元 素 的 元 素 框 与 其 父 元 素 的 width 相 
同 ， 块 级 元 素 的 
width+marginLeft+tmarginRight+paddingLeft+tpaddingRight 刚 好 等 于 父 级 
元 素 内 容 区 视 度 ， 显 示 时 默认 返 满 父 元 素 内 容 区 。 块 级 元 素 高 度 由 其 
子 元 素 决 定 ， 父 级 元 素 高 度 会 随 内 容 元 素 变 化 而 变化 。 块 级 元 素 特点 
总 结 如 下 : 


总 是 在 新 行 上 开始 。 


宽度 默认 为 
width+marginLeftt+marginRight+paddingLeft+paddingRight 刚 好 等 于 父 级 
元 素 内 容 区 视 度 ， 除 非 设 定 一 个 新 宽度 ， 这 里 需要 注意 ， 当 设置 块 级 
元 素 宽 度 为 100% 时 ， 如 果 当 前 块 级 元 素 存 在 padding、margin 会 导致 块 
级 元 素 溢 出 父 元 素 。 


-盒子 模型 高 度 默认 由 内 容 决定 。 


-盒子 模型 中 高 度 、 宽 度 及 外 边 距 和 内 边 距 都 可 控制 。 


可 以 容纳 行内 元 素 和 其 他 块 级 元 系 。 


示例 : 
<view/> 组 件 玖 认 旦 块 级 元 么 ， 下 面 我 们 使 用 <view/> 为 大 家 演示 块 
级 元 素 的 特性 ， 如 图 3-2 所 示 。 
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图 3-2” 块 级 元 素 示例 


代码 如 下 : 


<!-- 每 个 块 级 元 素 占 领 一 行 - -> 
<view style="border:solid 1px;"> 第 一 个 块 级 元 素 </view> 


<!-- 默认 情况 下 块 级 元 素 的 元 素 框 和 父 级 元 素 的 width 相 同 ， 刚 好 撑 满 内 容 
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task. 


区 --> 


<view style="border:solid 10px; margin : 10px; padding :10px;"> 第 二 个 块 级 元 素 


</view> 


<!-- 即使 宽度 不 足 ， 仍 会 占领 一 行 让 其 余 元 素 换行 - -> 


<view style="border:solid 1px; width : 200px;"> 第 三 个 块 级 元 素 </view> 


其 他 信息 


<1-- 


</view> 


父 级 元 素 高 度 随 内 容 决 是 内 容 为 二 
<view style="margin-top:10px; 
<View style="height : 


级 元 素 - -> 
border:solid 1px;"> 
100px; "> 块 级 元 素 </view> 


<!-- 父 级 元 素 高 度 随 内 容 决定 内 容 为 文本 流 情况 --> 
<view style="margin-top:10px; border:solid 1px; "> 

文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 
</view> 


不 在 这 


块 级 元 素 还 有 很 多 特性 ， 比 如 水 平 格式 化 、 垂 直 格 式 化 等 


文 里 一 一 列举 ， 


大 家 可 以 查 


阅 相关 资料 。 


， 我 们 


313 和 内 元 全 


除了 块 级 元 素 ， 最 第 见 的 束 古 行内 元 末了 ， 通 过 设 苟 display 属 性 
为 inline 可 以 将 一 个 元 素 设 置 为 行内 元 素 ， 小 程序 中 <text/> 束 是 一 个 行 
内 组 件 。 行 内 元 聚 没有 块 级 元 素 那 么 简单 直接 ， 块 级 元 聚 只 是 生成 
框 ， 通常 不 允许 其 他 内 容 与 这 些 框 并 存 ， 行 内 元 到 特点 总 结 如 下 : 


-和 其 他 非 块 级 元 素 都 在 一 行 上 。 


盒子 模型 中 高 度 、 宽 度 、 上 下 margin、 上 下 padding 设 置 均 无 效 ， 
只 能 设置 左右 margin 和 左右 padding 。 


:宽度 束 是 文字 或 图 片 的 宽度 ， 不 可 改变 。 


:行内 元 素 宽 度 、 高 度 都 不 能 直接 设置 。 


:行内 元 素 只 能 容纳 文本 或 其 他 行内 元 素 ， 在 行内 元 聚 中 放置 块 级 
元 素 会 引起 不 必要 的 混乱 。 


如 图 3-3 中 的 示例 ， 大 家 可 以 对 比 本 例 中 块 级 元 素 和 行内 元 素 的 区 
别 ， 我 们 设置 了 行内 元 素 的 margin， 布 局 时 上 下 margin 都 被 忽略 了 。 本 
例 中 我 们 将 上 下 padding 设 置 为 0， 大 家 可 以 笑 试 设置 为 其 他 值 ， 这 时 会 
发 现 上 下 padding 会 生效 ， 但 是 不 会 影响 布局 ， 本 例 中 行内 元 到 换行 是 
因为 上 面 的 块 级 元 系 强 制 占 位 一 行 。 
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图 3-3 行内 元 素 示 例 


本 例 的 代码 如 下 : 


<1-- 块 级 元 素 --> 
<view style="border:solid 1px #999; color : #999;"> 我 是 块 级 元 素 我 是 块 级 元 素 我 是 块 级 元 素 
我 是 块 级 元 素 我 是 块 级 元 素 </view> 


<!-- 通过 修改 dijsplay 属 性 的 行内 元 素 --> 
前 面 的 文字 <view style="border:solid 1px; margin:10px; padding : 9 10px; display: 
inline; "> 我 是 块 级 元 素 我 是 块 级 元 素 我 是 块 级 元 素 我 是 块 级 元 素 我 是 块 级 元 素 </view> 后 面 的 文字 


314 行内 顽 元 对 


行内 块 元 素 是 块 级 元 素 和 行内 元 素 的 混合 物 ， 当 display 属 性 为 
inline-block 时 ， 元 素 殉 被 设置 为 一 个 行内 块 元 素 ， 行 内 块 元 素 可 以 设置 
宽 、 高 、 内 边 距 和 外 边 距 ， 可 以 简单 认为 行内 块 元 素 是 把 块 级 元 素 以 
行 的 形式 展现 ， 保 留 了 块 级 元 素 对 宽 、 高 、 内 边 距 、 外 边 距 的 设置 ， 
它 就 像 一 张 图 一 样 放 在 一 个 文本 行 中 ， 如 图 3-4 所 示 。 
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前 面 的 文字 


我 是 块 级 元 素 我 是 块 级 元 素 我 是 块 级 元 
素 我 是 块 级 元 素 我 是 块 级 元 素 


Console 


图 3-4 行内 块 元 陛 示 例 


代码 如 下 : 


<!-- 行内 块 元 素 宽度 撑 满 父 级 宽度 情况 - -> 
前 面 的 文字 <view style="border:solid 1px; margin:10px; padding : 10px; 
本 inline-block; "> 我 是 块 级 元 素 我 是 块 级 元 素 我 是 块 级 元 素 我 是 块 级 元 素 我 是 抉 级 元 素 </view> 后 


<!-- 行内 块 元 素 宽度 不 足 父 级 宽度 情况 - -> 


前 面 的 文字 <view style="border: solid 1px; margin: 10px; padding : 10px; display: 
inline-block;"> 我 是 行内 块 元 素 </view> 后 面 的 文字 后 面 的 文字 后 面 的 文人 


3.2 ”浮动 和 定位 


了 解 基本 盒子 模型 后 ， 本 小 市 开始 讲解 定位 相关 的 内 容 ， 定 位 的 
基本 思想 很 集 单 ， 它 允许 你 定义 元 素 框 相对 于 其 正常 位 置 应 该 出 现在 
哪 ， 或 者 相对 于 父 元 素 、 另 一 个 元 素 甚至 浏览 郁 窗 口 本 身 的 位 置 。 浮 
动 和 定位 是 我 们 常用 的 布局 方案 ，WXSS 也 文 持 Flex 布 局 方 采 ， 接 下 
来 我 们 将 对 这 三 种 布局 方案 一 一 讲解 。 


1 党 动 


浮动 不 完全 是 定位 ， 同 时 它 也 不 古 正常 流 布 局 ， 通 过 设置 float 属 
性 ， 浮 动 的 框 可 以 同 左 或 者 问 右 移 动 ， 直 到 其 外 边 缘 磁 到 包含 框 或 力 
一 个 浮动 框 的 边框 为 止 。 由 于 浮动 框 不 在 文档 的 普通 流 中 ， 文 档 的 普 
通 流 中 的 会 表现 的 浮动 框 不 存在 一 样 ， 其 他 内 容 会 环绕 过 去 ， 如 图 3-5 
所 示 。 


微 信 开 发 者 工具 0.10.102800 一 口 X 


[ | Console 


© 宇 top 
Vv Tue Nov 15 


float/float 
be caused b 
add page 

2. Invoking 
task. 


图 3-5 ”浮动 示例 


代码 如 下 : 


<view> 

文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 <view 
style="display:block;float:1left;border:solid 1px;margin : 20px; "> 浮动 框 </view> 文 本 文 
本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 
文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 


</view> 


上 例 中 浮动 区 域 在 它 当 前 的 位 置 往 左 浮动 ， 直 至 父 元 素 内 容 框 ， 
其 他 文本 都 环绕 而 过 。 由 于 元 素 浮 动 时 不 在 普通 流 中 ， 导致 父 级 
元 于 忽略 浮动 元 素 高 度 ， 形 成 雇 塌 ， 如 图 3-6 所 示 。 


代码 如 下 : 


<!- - 父 级 元 素 高 / 度 只 会 包含 第 一 元 素 忽略 浮动 元 素 --> 
<view style=" 'border:solid 1px;"> 
<view> 其 他 元 素 </view> 
<view style="float:1left;"> 浮 动 框 </view> 
</view> 
没有 包 襄 浮动 框 ， 虽然 这 是 浮动 的 一 个 特 


本 例 中 父 级 元 素 的 边框 


区 六 


本 例 中 父 级 元 素 的 边框 并 没有 包 囊 浮 动 框 ， 虽 然 这 十 浮 动 的 一 个 
等 性 ， 并 不 是 一 个 bug， 但 在 某 些 情况 下 我 们 仍然 布 望 在 使 用 译 动 的 同 
十 ， 父 级 元 素 的 高 度 能 包 囊 浮动 元 素 ， 这 时 我 们 束 需 要 了 解 和 浮动 的 
另 一 个 属性 : clear 〈 清 除 ) 。 当 设置 元 素 clear 时 ， 可 以 确保 当前 元 素 的 
左边 、 右 边 或 左右 两 边 同 时 不 能 出 现 浮动 的 元 素 ， 如 图 3-7 所 示 。 
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图 3-6 浮动 高 度 问题 示例 
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图 3-7 清除 浮动 示例 


代码 如 下 : 


<!-- 父 元 素 会 包含 清除 浮动 元 素 - -> 
<view style="border:solid 1px;"> 

<view> 其 他 元 素 </view> 

<view style="float:1left;"> 浮 动 框 </view> 

<!-- 设置 当前 元 素 左 边 不 能 出 现 浮 动 元素 --> 

<view style="clear :1left;"> 清 除 浮 动 元 素 </view> 
</view> 


<view style="border:solid 1ipx; margin-top:10px;"> 
<view> 其 他 元 素 </view> 
<view style="float:1left;"> 浮 动 框 </view> 
<view> 不 清除 浮动 </view> 

</view> 


在 上 例 中 有 个 特别 有 意思 的 现象 ， 父 元 素 虽 然 会 忽略 浮动 元 素 

(如 浮动 高 度 示例 中 产生 的 地 塌 ) ， 但 是 不 会 忽略 其 他 元 素 (包括 清 
除 浮动 的 元 素 ) ， 而 清除 浮动 的 元 素 总 在 浮动 元 素 下 方 ， 所 以 在 显示 
时 视觉 上 父 元 素 就 把 所 有 元 素 都 包含 进去 了 ， 如 上 例 中 无 论 非 浮动 元 
素 在 哪里 ， 父 元 素 边框 都 包含 了 非 浮动 元 素 。 利 用 这 个 特性 ， 如 果 把 
上 例 中 清除 浮动 的 高 度 置 为 0 使 其 看 不 见 ， 这 时 父 元 素 仍然 会 包 庄 它 ， 
这 样 就 能 防止 浮动 元 素 父 元 素 高 度 二 塌 ， 网 上 利用 after 伪 属性 清除 浮动 
就 是 这 个 原理 。 这 里 我 们 对 比 使 用 元 素 和 after 伪 属性 2 种 实现 方案 ， 如 
图 3-8 所 示 。 
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图 3-8 清除 浮动 应 用 示例 
WXML 文 件 的 代码 如 下 : 


<!- - 添加 高 度 为 6 的 元 素 清 除 浮动 - -> 
<view style="border:solid 1px;"> 
<view> 其 他 元 素 </view> 


<view style="float:1left;"> 浮 动 框 </view> 
<view style="clear:both;height:0;"></view> 
</view> 


<!-- 利用 伪 属 性 在 后 面 插入 一 个 元 素 清除 浮动 - -> 
<view style="border:solid 1px; margin-top:1i0px;" class="clearfix"> 
<view> 其 他 元 素 </view> 
<view style="float:1left;"> 浮 动 框 </view> 
</view> 
<!-- 不 清除 浮动 对 比 - -> 
<view style="border:solid 1px; margin-top:10px;"> 
<view> 其 他 元 素 </view> 
</view> 


<view style="float:1left;"> 浮 动 框 </view> 


.WXSS 文 件 的 代码 如 下 : 


/* 一 定 要 


设置 


content, 


否则 元 素 不 会 显示 */ 
.clearfix:after { display:block; height 


: 0; clear : both; content : '' } 


在 实际 项 目 中 ,为 了 复 用 性 和 便捷 性 ， 我 们 通常 使 用 .clearfix 类 清 
除 浮 动 。 


oy 人 


元 素 的 定位 由 position 属 性 控制 ，position 有 4 种 不 同类 型 的 定位 ， 
会 影响 元 素 杠 生成 的 方法 : 


-static: 元 素 框 正 常生 成 。 块 级 元 素 生 成 一 个 和 矩形 框 ， 作 为 文档 流 
的 一 部 分 ， 行 内 元 素 则 会 创建 一 个 或 多 个 行 框 ， 置 于 其 父 元 素 中 ， 
static 是 position 的 默认 值 。 


relative: 元 系 框 侦 移 某 个 距离 。 元 素 仍 保持 其 末 定 位 前 的 形状 ， 
它 原 本 所 占 的 空间 仍 保留 。 


absolute: 元 素 框 从 文档 流 中 完全 删除 ， 并 相对 于 其 包含 块 定位 ， 
包含 块 可 能 是 文档 中 的 另 一 个 元 素 或 者 是 初始 包含 块 。 对 于 absolute 来 
说 ， 包 含 块 是 离 当 前 元 素 最 近 的 position 为 absolute 或 relative 的 父 元 素 ， 
如 果 父 元 素 中 没有 任何 absolute 或 relative 布 局 的 元 素 ， 那 么 包含 块 就 是 
根 元 素 。 使 用 position 布 局 后 ， 元 素 原先 在 正常 文档 流 中 所 占用 的 空间 
会 关闭 ， 束 好 像 该 元 素 原来 不 存在 一 样 。 元 素 定 位 后 生成 一 个 块 级 
框 ， 不 论 原 来 它 在 正常 流 中 生成 何 种 类 型 的 框 。 


-fixed: 元 素 框 的 表现 类 似 于 将 position 设 置 为 absolute， 不 过 其 包含 
块 是 视窗 本 喘 。 


示例 如 图 3-9 所 示 。 
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图 3-9 ”position 属 性 示例 


代码 如 下 : 


<!-- relative 相 对 之 前 位 置 进行 移动 ， 原 占有 空间 不 会 被 关闭 --> 
<view style="border:solid 1px;"> 
文案 文案 <text style="position:relative; top : 10px; left : 


10px;">relative</text> 文 案 文案 文案 文案 文案 文案 文案 
</view> 


<!-- absolute 依 赖 于 包含 块 ， 原 占有 空间 会 被 关闭 - -> 

<view style="border:solid 1px; position:relative; height : 80px;"> 
文案 文案 <text style="position:absolute;left : 10px; bottom : 

10px;">absolute</text> 文 案 文 案 文 案 文 案 文 案 文 案 文 案 

</view> 


<!-- 没有 找到 最 近 的 absolute 或 relative 元 素 会 直接 认为 根 元 素 是 包含 块 ， 原 占有 空间 会 关闭 - -> 
<view style="border:solid 1px;"> 

文案 文案 <text style="position:absolute;left : 10px; bottom : 10px;">absolute 不 设 
置 包含 块 </text> 文 案 文案 文案 文案 文案 文案 文案 
</view> 


<!-- fixed 直 接 认为 视窗 本 身 为 包含 块 ， 原 占有 空间 会 关闭 --> 

<view style="border:solid 1px;"> 
文案 文案 <text style="position:fixed;right : 10px; bottom : 30px;border:solid 

1px;">fixed</text> 文 案 文 案 文 案 文案 文案 文案 文案 

</view> 


3.3 Flex 布局 


浮动 和 定位 是 基于 盒子 模型 的 传统 布局 解决 方案 ， 它 在 处 理 一 些 
特殊 布局 时 非常 不 方便 ， 比 如 垂直 居中，2009 年 W3C 提 出 了 一 种 新 的 
方案 Flex 布 局 ， 该 布局 可 以 简单 快速 地 完成 各 种 伸缩 性 的 设计 。Flex 
是 Flexible Box 的 缩写 ， 即 为 弹性 盒子 布局 ， 可 以 为 传统 盒子 模型 带 来 
更 大 的 灵活 性 ， 目 前 主流 浏览 器 都 支持 这 种 布局 ， 小 程序 WXSS 也 对 
其 进行 了 实现 ， 项 目 中 可 以 随意 使 用 。 


3.3.1 基本 概念 


Flex 布 局 主要 由 容器 和 项 目 构 成 ， 采 用 Flex 布 局 的 元 素 ， 称 为 Flex 
容 右 (flex container) ， 它 的 所 有 直接 子 元 素 自 动 成 为 容器 成 员 ， 称 为 
Flex 项 目 (flex item) 。 可 以 设置 display: flex 或 display: inline-flex 将 任 
何 一 个 元 素 指 定 为 Flex 布 局 ， 如 图 3-10 所 示 ， 容 器 默认 存在 两 根 轴 ， 水 
平 的 主轴 (main axis) 和 垂直 的 交叉 轴 (cross axis) ， 主 轴 开 始 的 位 置 
(及 主轴 与 边框 的 交叉 点 ) 叫 main start， 结 束 的 位 置 叫 main end，main 
start 和 main end 和 主轴 的 方向 有 关 ; 交叉 轴 开 始 的 位 置 叫 cross start， 结 
束 的 位 置 叫 cross end，cross start 和 cross end 和 交叉 轴 方 向 有 关 。 项 目 默 
认 沿 主轴 从 主轴 开始 的 位 置 到 主轴 结束 的 位 置 进行 排列 ， 项 目 在 主轴 
上 占据 的 空间 叫 main size， 在 交叉 轴 上 占据 的 空间 叫 cross size 。 
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图 3-10 Flex 布局 模型 


J EL 


3.3.2” 容 姨 属 性 


容 絮 文 持 的 属性 有 : 


:display: 通过 设置 display 属 性 ， 指 定 元 素 是 否 为 Flex 布 局 。 
-flex-direction: 指定 主轴 方向 ,决定 了 项 目的 排列 方式 。 
-flex-wrap: 排列 换行 设置 。 

flex-flow: flex-direction 和 flex-wrap 的 简写 形式 。 
justify-content: 定义 项 目 在 主轴 上 的 对 齐 方式 。 
-align-items: 定义 项 目 在 交叉 轴 上 的 对 齐 方式 。 


align-content: 定义 多 根 轴 线 的 对 齐 方式 ， 如 采 只 有 一 根 轴 线 ， 该 
属性 不 起 作用 。 


1.display 
display 用 来 指定 该 元 素 是 否 为 Flex 布 局 ， 语 法 为 : 


.mybox{ display: flex | inline-flex; } 


其 属性 值 如 下 : 


-flex: 用 于 产生 块 级 Flex 布 局 。 


inline-flex: 用 于 产生 行内 Flex 布 局 ， 行 内 容 句 符合 行内 元 素 的 特 


性 ， 同 时 在 容器 内 又 符合 Flex 布 局 规范 。 
设置 Flex 布 局 以 后 ， 子 元 素 的 float、clear 和 vertical-align 属 性 将 会 失 
2 


2.flex-direction 
flex-direction 用 于 指定 主轴 的 方向 ， 即 项 目 排列 的 方向 ， 语 法 为 : 
.mybox{ flex-direction : row | row-reverse | colum | colum-reverse; } 
它 有 4 个 值 (如 图 3-11) : 

TOW: 主轴 为 水 平方 向 ， 起 点 在 左 端 ， 默 认 值 。 

TOw-reverse: 主轴 为 水 平方 向 ， 起 点 在 右 端 。 

:colum: 主轴 为 垂直 方向 ， 起 点 在 上 沿 。 


:colum-reverse: 主轴 为 垂直 方 同 ， 起 点 在 下 沿 。 


IOW-IeVelISe 


图 3-11 flex-direction 示 例 
3.flex-wrap 


默认 情况 下 ， 项 目 都 排 在 一 条 线 上 ，flex-wrap 用 来 指定 如 果 一 条 
轴线 排 不 下 ， 该 如 何 换 行 。 


.mybox{ flex-wrap : nowrap | wrap | wrap-reverse; } 


它 有 3 个 值 (如 图 3-12 所 示 ) : 


nowrap flex-end 


flex-end 


图 3-12 ”flex-wrap 示 例 
-nowrap: 不 换行 ， 默认 值 。 
wrap: 换行 ， 第 一 行 在 上 方 。 
"Wrap-reverse: 换行 ， 第 一 行 在 下 方 。 


当 设置 换行 时 ， 还 需要 设置 align-item 属 性 配合 实现 自动 换行 ， 并 
且 align-item 的 值 不 能 为 "stretch”。 


4.flex-flow 


flex-flow 是 flex-direction 和 flex-wrap 的 人 简写 形式 ， 默 认 值 为 row 


nowrap。 语法 如 下 : 


.mybox{ flex-flow : <flex-direction> || <flex-wrap>; } 


示例 代码 如 下 : 


.mybox{ flex-flow : row-reverse wrap; } 

.mybox{ flex-flow : wrap row-reverse; } /* 和 上 一 句 效果 一 样 */ 
.mybox{ flex-flow : row-reverse; } 

.mybox{ flex-flow : wrap; } 


5.justify-content 


justify-content 属 性 定义 了 项 目 在 主轴 上 的 对 齐 方式 ， 语 法 如 下 : 


.mybox{ justify-content : flex-start | flex-end | center | space-between | space- 
around; } 


justify-content 与 主轴 方向 有 关 ， 包 括 以 下 属性 (默认 主轴 从 左 到 
右 ， 如 图 3-13 所 示 ) 


.flex-start: 左 对 齐 ， 默 认 值 。 
.flex-end: 右 对 齐 。 


“center: 居中 


space-between: 两 端 对 章 ， 项 目 之 间 的 间隔 都 相等 。 


:Space-around: 每 个 项 目 两 侧 的 间隔 相等 。 所 以 ， 项 目 之 间 的 间隔 
比 项 目 与 边框 的 间隔 大 一 倍 。 


6.align-items 
align-items 指 定 项 目 在 交叉 轴 上 如 何 对 齐 ， 语 法 如 下 : 


.mybox{ align-items : flex-start | flex-end | center | baseline | stretch; } 


algin-items 与 交叉 轴 方 向 有 关 ， 包 括 以 下 属性 《假设 交 叉 轴 从 上 到 
下 ， 如 图 3-14 所 示 ) : 


flex-start: 交叉 轴 的 起 点 对 齐 。 
-flex-end: 交叉 轴 的 终点 对 齐 。 


center: 交叉 轴 的 中 线 对 齐 。 
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图 3-13 ”justify-content 示 例 


-baseline: 项 目 根据 它们 第 一 行文 字 的 基线 对 齐 。 


stretch: 如 果 项 目 未 设置 高 度 或 设置 为 auto， 项 目 将 在 交 义 轴 方 癌 
拉 伸 填充 整个 容 强 ， 默 认 值 。 


7.align-content 


align-content 用 来 定义 项 目 多 根 轴线 (出现 换 行 后 ) 在 交叉 轴 上 的 
对 齐 方式 ， 如 果 项 目 只 有 一 根 轴线 ， 该 属性 不 起 作用 ， 语 法 如 下 


.mybox{ align-content : flex-start | flex-end | center | space-between | space- 
around | stretch,; } 


其 属性 值 如 下 (如 图 3-15) : 

-flex-start: 与 交叉 轴 的 起 总 对 齐 。 

flex-end: 与 交叉 轴 的 终点 对 齐 。 

center: 与 交叉 轴 的 中 点 对 齐 。 

Space-between: 与 交叉 轴 两 喘 对 齐 ， 轴 线 之 间 的 间隔 平均 分 布 。 


space-around: 每 根 轴 线 两 侧 的 间隔 都 相等 ， 轴 线 之 间 的 间 隅 比 轴 
线 与 边框 间隔 大 一 倍 。 


stretch: 轴线 占 满 整个 交叉 轴 ， 每 个 项 目 会 被 拉 伸 直人 至 填 满 交叉 
轴 ， 默 认 值 。 
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图 3-14 align-items 示 例 


3.3.3 项目 属 性 


项 目 文 持 的 属性 有 6 个 : 
'order: 定义 项 目的 排序 顺序 。 
-flex-grow: 定义 项 目的 放大 比例 。 


-flex-shrink: 定义 项 目的 缩小 比例 。 


flex-basis: 定义 在 分 配 多 余 空间 之 前 ， 项 目 占据 的 主轴 空间 


(main size) 。 
‘flex: flex-grow 、flex-shrink 和 flex-basis 的 倍 写 。 


align-self 用 来 设置 单独 的 伸缩 项 目 在 交叉 轴 上 的 对 齐 方式 ， 可 
履 盖 默认 的 algin-items 属 性 。 


1.order 


order 属 性 定义 项 目的 排列 顺序 。 数 值 越 小 ， 排 列 越 靠 前 〈 如 图 3- 
16) ， 默 认为 0， 语 法 如 下 : 


.myitem{ order : <integer>; } 


图 3-15 align-content 示 例 


示例 1 示例 2 


图 3-16 ”order 示 例 
2.flex-grow 


flex-grow 定 义 项 目的 放大 比例 ， 默 认为 0， 即 如 有 果 存 在 剩余 空间 ， 
也 不 放大 ， 语 法 如 下 : 


.myitem{ flex-grow : <number>; } 


如 果 所 有 项 目的 flex-grow 值 都 为 1， 则 它们 将 等 分 剩余 空间 (如 果 
有 的 话 ) 。 如 果 一 个 项 目的 flex-grow 属 性 为 2， 其 他 项 目 都 为 1， 则 前 


者 占据 的 剩余 空间 将 比 其 他 项 多 一 倍 ， 整 体 按 比 例 填 充 剩 余 空 间 ， 如 
图 3-17 所 示 。 


等 比例 放大 按 比 例 放大 


图 3-17 flex-grow 示 例 
3.flex-shrink 


flex-shrink 定 义 了 项 目的 缩小 比例 ， 默 认为 1， 如 果 空 间 不 足 ， 
项 目 将 缩小 ， 语 法 如 下 : 


.myitem{ flex-shrink : <number>; } 


如 果 所 有 项 目的 flex-shrink 属 性 都 为 1， 当 空间 不 足 时 ， 都 将 等 比 
缩小 。 如 果 一 个 项 目的 flex-shrink 属 性 为 0， 其 他 项 目 都 为 7， 则 空间 不 
足 时 ， 前 者 不 缩小 ， 负 值 对 该 属性 无 效 。 这 个 属性 大 多 数 资料 都 没有 
细 讲 ， 这 里 我 们 举 个 例子 (如 图 3-18) ， 如 一 个 容器 宽 200px， 里 面 有 4 
个 项 目 ， 它 们 的 宽度 都 为 00px， 那 么 整体 宽度 就 是 4x60=240px， 比 容 
器 多 了 40px， 如 果 这 4 个 项 目的 flex-shrink 值 分 别 为 1、2、1、3， 和 那么 


它们 的 宽度 分 别 按 比 例 减 少 40pxx1/ (1+2+1+4) =5px、40pxx2/ 
(1+2+1+4) =10pX、40pxx1/ (1+2+1+4) =5pX、40pxx4/ (1+2+1+4) 


=20px， 缩 小 后 它们 的 宽度 分 别 为 : 55px、50px、55px、40px。 
4.flex-basis 


flex-basis 属 性 用 来 定义 伸缩 项 目的 基准 值 ， 剩 余 的 空间 将 按 比例 
进行 缩放 。 它 的 默认 值 为 auto， 即 项 目的 本 来 大 小 ， 语 法 如 下 : 


.myitem{ flex-basis : <length> | auto,; } 


它 可 以 设 为 跟 width 或 height 属 性 一 样 的 固定 值 ， 如 320px， 这 样 项 
目 将 占据 固定 空间 。 


缩小 前 布局 


O60px 60px 60px 60px 


上 50px 二 50px 二 50px -二 50px -二 上 -55px 一 | 上 Sopx 直上 -55px 一 小 40px] 


图 3-18 ”flex-shrink 示 例 


5.flex 


flex 属 性 是 flex-grow、flex-shrink 和 和 flex-basis 的 人 简写， 默认 值 为 01 
auto。 后 两 个 属性 可 选 ， 语 法 如 下 : 


.myitem{ none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 


该 属性 有 两 个 快捷 值 : auto (11auto) 和 none (00 auto) 。 


建议 优先 使 用 这 个 属性 ， 而 不 是 单独 写 三 个 分 离 的 属性 ， 因 为 浏 
览 右 会 推算 相关 值 。 


示例 代码 如 下 : 


.myitem{ flex: 1 1 auto } 


.myitem{ flex : auto; } /* 同上 句 */ 
.myitem{ flex: 0 0 auto } 
.myitem{ flex : none; } /* 同上 句 */ 


.myitem{ flex : 1 auto; } 
.myitem{ flex : 1 1; } 


6.align-self 


align-self 用 来 设置 单独 的 伸缩 项 目 在 交 义 轴 上 的 对 齐 方式 ， 该 属性 
会 复写 默认 的 对 齐 方式 ， 语 法 如 下 ; 


.myitem{ align-self : auto | flex-start | flex-end | center | baseline | stretch, 
} 


该 属性 6 个 值 除 了 auto， 其 余 和 容 絮 align-items 属 性 完全 一 致 : 


-auto: 表示 继承 容器 align-items 属 性 ， 如 果 没 有 父 元素 ， 则 等 同 于 
stretch， 默 认 值 。 


flex-start: 交叉 轴 的 起 点 对 章 ， 如 图 3-19 所 示 。 


-flex-end: 交叉 轴 的 终点 对 齐 。 


center: 交叉 轴 的 中 线 对 齐 。 


baseline: 项 目 根据 它们 第 一 行文 字 的 基线 对 齐 。 


stretch: 如 果 项 目 未 设置 高 度 或 设置 为 auto， 项 目 将 在 交叉 轴 方 癌 
拉 伸 填充 整个 容器 ， 默 认 值 。 


align-self 举例 


图 3-19 align-self 示 例 


加 


布局 是 构建 页 面 的 基础 ， 如 果 使 用 时 不 小 心 也 会 产生 一 些 意料 之 
外 的 问题 。 在 使 用 布局 时 ， 需 要 在 合适 的 场景 使 用 合适 的 定位 技术 ， 
对 元 素 的 定位 、 重 合 、 登 放 顺 序 、 大 小 和 放置 等 都 要 仔细 考虑 。 如 来 
使 用 浮动 ， 还 需要 考虑 浮动 和 正 前 流 的 关系 ， 在 合适 的 位 置 还 需要 请 
除 浮动 ， 这 些 细节 都 是 在 布局 中 需要 考虑 的 点 。 下 一 章 我 们 将 讲解 组 
件 相 关 的 知识 ， 掌 握 布局 后 ， 我 们 只 需要 将 组 件 放 置 在 合适 的 布局 
中 ， 即 可 构建 出 需要 的 界面 。 


第 4 章 组件 


小 程序 定义 了 各 种 各 样 的 组 件 ， 它 们 在 WXML 中 起 着 各 不 相同 的 
作用 。 与 HTML 元 素 一 样 ， 一 个 组 件 是 指 从 组 件 开始 标签 到 结束 标签 
的 所 有 代码 ， 由 于 组 件 可 能 会 被 转译 为 不 同 端 对 应 的 代码 ， 所 以 在 页 
面 创 建 过 程 中 ， 不 能 使 用 小 程序 组 件 标 签 以 外 的 标签 。 在 本 章 中 ， 我 
们 将 介绍 小 程序 相关 组 件 ， 包 括 视图 容器 、 基 础 容器 、 表 单 组 件 、 导 
航 媒体 组 件 、 地 图 、 画 布 、 客 服 会 话 8 大 类 。 为 了 让 大 家 更 好 地 理解 每 
个 组 件 的 特性 ， 避 人 免 干 扰 理 解 ， 在 本 章 中 我 们 尽 可 能 少 地 使 用 
WXSS， 所 以 案例 界面 不 太美 观 。 


4.1 组 件 定 义 及 属性 


上 一 章 介 绍 了 小 程序 框架 原理 ， 在 框架 基础 上 官方 提供 了 一 系列 
基础 组 件 ， 开 发 者 可 通过 这 些 基础 组 件 进行 任意 组 合 快速 开发 。 小 程 
序 组 件 类 似 于 HTML 元 素 ， 每 个 标签 代表 一 个 组 件 ， 官 方 对 组 件 作 了 
如 下 定义 : 


组 件 是 视图 层 的 基本 组 成 单元 。 


~ 
a 


组 件 目 市 一 些 功 能 与 微 信 风 格 的 样式 。 


[Be 
a 


一 个 组 件 通 常 包括 开始 标签 和 结束 标签 ， 属 性 用 来 修饰 这 个 组 
件 ， 内 容 在 两 个 标签 之 内 。 


CD 
i 


按 类 型 可 以 将 组 件 划分 为 七 大 类 : 视图 容器 、 基 础 内 容 、 表 单 、 
导航 、 多 媒体 、 地 图 、 画 布 。 


一 个 完整 的 组 件 结构 如 下 : 


<tagname property="value">contents</tagname> 


组 件 可 以 通过 属性 进行 配置 ， 属 性 只 能 用 在 开始 标签 或 单个 目 闭 
合 标签 上 ， 不 能 用 于 结束 标 答 。 一 个 组 件 可 以 对 应 多 个 属性 ， 属 性 具 


有 名 称 和 值 两 部 分 ， 组 件 的 属性 名 称 都 是 小 写 ， 以 连 字 符 僵 连接。 组 
件 属性 分 为 所 有 组 件 部 有 的 共同 属性 和 组 件 目 定义 的 特殊 属性 。 


1. 组 件 的 共同 属性 


组 件 的 共同 属性 指 每 个 组 件 都 有 的 属性 ， 在 每 个 组 件 中 它们 代表 
的 意义 和 作用 都 一 样 ， 如 下 所 示 : 


id: 组 件 的 唯一 表示 ， 保 持 整 个 页 面 唯一 。 


class: 组 件 里 的 样式 类 ， 在 对 应 的 WXSS 中 定义 的 样式 类 。 


style: 组 件 的 内 联 样 式 ， 可 以 动态 设置 的 内 联 样 式 。 使 用 方式 同 
HTML 标 签 style 属 性 。 


hidden: 组 件 是 否 显 示 ， 所 有 组 件 默 认 显 示 。 


:data-*: 目 定义 属性 ， 组 件 上 触发 事件 时 ， 会 发 送 给 事件 处 理 函 
数 。 事 件 处 理 函 数 可 以 通过 datascl 获 取 。 


bind*/catch*: 组 件 的 事件 ， 绑 定 逻 辑 层 相 关 事 件 处 理 函 数 。bind 
为 冒 泡 事件 ，catch 为 非 冒 泡 事 件 。 


除 上 述 属性 以 外 几乎 所 有 组 件 都 有 目 定 义 属 性 ， 可 以 对 该 组 件 的 
功能 或 样式 进行 修饰 ， 具 体 参 考 各 个 组 件 的 定义 。 


2. 组 件 的 属性 类 型 


每 个 属性 都 有 其 对 应 的 类 型 ， 使 用 时 应 给 属性 值 传 入 对 应 的 类 型 
值 ， 属 性 按 类 型 可 分 为 


Boolean: 布尔 值 ， 组 件 写 上 该 属性 ， 不 管 该 属性 等 于 什么 ， 其 
值 都 为 rue， 只 有 组 件 上 没有 写 该 属性 时 ， 属 性 值 才 为 false。 如 有 果 属 性 
值 为 变量 ， 变 量 的 值 会 被 转换 为 Boolean 类 型 。 


.Number: 数字 。 

:String: 字符 串 。 

Array: 效 组 。 

.Object: 对 象 。 

EventHandler: 事件 处 理 函 数 名 。 


.Any: 任意 属性 。 


4.2 视图 容 需 


有 过 前 端 经 验 的 同学 都 了 解 ， 在 前 端 项 目 中 我 们 第 使 用 DIV+CSS 
进行 页 面 布局 ， 其 中 <divw> 没 有 任何 语义 和 功能 ， 仅 作为 容器 元 素 存 
在 ， 在 小 程序 中 ， 有 一 套 类 似 <diw> 的 容器 组 件 ， 那 就 是 <view/>、 
<scroll-view/> 和 <swiper/>。 在 HTML 中 大 部 分 标签 内 部 能 髓 套 任 何 标 
签 ， 如 <div/>、<span/>、<section/>、<p/> 等 ， 但 是 在 小 程序 中 ， 大 部 
分 组 件 都 有 它 自 己 特 殊 的 功能 和 意义 ， 标 签 都 有 特定 的 用 法 ， 内 部 也 
只 能 般 套 指定 的 组 件 ， 而 容器 组 件 内 部 能 山 套 任何 标签 ， 容 器 组 件 是 
构建 布局 的 基础 组 件 。 本 小 节 主 要 介绍 视图 类 容 右 。 


4.2.1 View 组 件 


<view/> 是 一 个 块 级 容器 组 件 ， 没 有 特殊 功能 ， 主 要 用 于 布局 展 
示 ， 是 布局 中 最 基本 的 UI 组 件 ， 任 何 一 种 复杂 的 布局 都 可 以 通过 的 套 
<view/> 组 件 ， 设 置 相关 WXSS 实 现 。<view/> 文 持 常 用 的 CSS 布 局 属 
性 ， 如 display、float、position 甚 至 Flex 布 局 等 ， 熟 悉 DIV+CSS 布 局 的 
读者 上 手 应 该 很 容易 。 


<view/> 具 备 一 套 关 于 点 击 行为 的 属性 : 
.hover: 是 否 启 动 点 击 态 ， 默 认 值 为 false。 


.hover-class: 指定 按 下 去 的 样式 。 当 hover-class="none" 时 ， 没 有 
点 击 态 效果 ， 默 认 值 为 none。 


.hover-start-time: 按 住 后 多 久 出 现 点 击 态 ， 单 位 野 秒 ， 默 认 值 为 
50。 

.hover-stay-time: 手指 松 开 后 点 击 态 保留 时 间 ， 单 位 毫秒 ， 默 认 
值 为 400 。 


为 了 大 家 让 大 家 能 更 直观 的 了 解 <view/> 布 局 的 特性 ， 下 面 为 大 家 
示范 一 些 和 常用 的 布局 。 


1. 水 平 3 栏 布局 


水 平 3 栏 布局 如 图 4-1 所 示 。 


1 2 3 


图 4-1 三 栏 布局 


水 平 3 栏 布局 思路 比较 简单 ， 我 们 在 一 个 <view/> 中 放置 另外 3 个 等 
分 <view/> 即 能 实现 ， 这 里 我 们 使 用 Flex 布 局 实现 ， 代 码 如 下 : 


<view style="display:flex;"> 
<view style="background-color:red;flex-grow:1;height:80rpx;"></view> 
<view style="background-color:blue;flex-grow:1;height:80rpx;"></view> 
<view style="background-color:green;flex-grow:1;height:80rpx;"></view> 
</view> 


2. 左 右 混合 布局 


左右 混合 布局 如 图 4-2 所 示 。 


图 4-2 ”左右 混合 布局 


我 们 先 在 一 个 <view/> 中 水 平 放置 两 个 <view/>， 按 需要 设置 宽 
度 ， 然 后 在 右 侧 <view/> 中 再 创建 2 个 <view/> 组 件 ， 设 置 为 垂直 布局 ， 
代码 如 下 : 


<view style="display:flex;height:400rpx;"> 
<view style="background-color:red;width:250rpx;color:#fff;">1</view> 
<view style="flex-grow:1;display:flex;flex-direction:column;"> 
<view style="flex-grow:1;background-color:blue;color:#fff;">2</view> 
<view style="flex-grow:1;background-color:green;color:#fff;">3</view> 
</view> 

</view> 


3. 上 下 混合 布局 


上 下 混合 布局 如 图 4-3 所 示 。 


图 4-3 上 下 混合 布局 


同 左右 混合 布局 思路 一 样 ， 我 们 移 在 一 个 <view/> 中 放置 两 个 生 直 
布局 <view/> ， 按 需要 设置 高 度 ， 然 后 在 下 面 的 <view/> 中 再 创建 两 个 
<view/>， 设 置 为 水 平 布局 ， 代 码 如 下 : 


<view style="display:flex;flex-direction:column;height:400rpx;"> 
<view style="background-color:red;height:150rpx;color:#fff;">1</view> 
<view style="flex-grow:1;display:flex;"> 
<view style="flex-grow:1;background-color:blue;color:#fff;">2</view> 
<view style="flex-grow:1;background-color:green;color:#fff;">3</view> 
</view> 

</view> 


过 上 面 3 个 案例 大 家 可 以 发 现 ， 任 何 复杂 的 布局 都 是 通过 不 断 藤 
套 <view/> 实 现 的 ， 在 小 程序 中 使 用 <view/> 束 像 我 们 在 HTML 使 用 
<div> 一 样 便捷 ， 通 过 <view/> 我 们 可 以 构建 出 任何 想 要 的 界面 。 


4.2.2 scroll-view 组 件 


在 布局 过 程 中 ， 我 们 需要 一 些 容 器 具备 可 滑动 的 能 力 ， 尽 管 我 们 
可 以 通过 给 <view/> 设 置 overflow: scroll 属 性 来 实现 ， 但 由 于 小 程序 实 
现 原理 中 没有 DOM 概 念 ， 我 们 没 法 直接 监听 <view/> 滚 动 、 触 项 、 触 
底 等 事件 ， 这 时 便 需 要 使 用 <scroll-view/>。<scroll-view/> 在 <view/> 基 
础 上 增加 了 滚动 相关 属性 ， 通 过 设置 这 些 属 性 ， 我 们 能 响应 滚动 相关 
事件 。<scroll-view/> 属 性 如 下 : 


scroll-x: 人 允许 横 同 深 动 ， 默 认为 false 。 


scroll-y: 人 允许 纵 癌 滚动 ， 默 认为 false 。 


-upper-threshold: 距 顶 部 /左边 多 远 时 (单位 px) ， 触 发 
scrolltoupper 事 件 ， 默 认 值 为 50。 


:Jower-threshold: 距 底 部 /右边 多 远 时 (单位 px) ， 触 发 
scrolltolower 事 件 ， 默 认 值 为 50。 


scroll-top: 设置 竖 同 滚动 条 位 置 。 


“scroll-left: 设置 横 癌 深 动 条 位 置 。 


“scroll-into-view: 值 应 为 某 子 元 素 id， 滚 动 到 该 元 素 时 ， 元 素 顶 部 
对 齐 滚动 区 域 顶 部 。 


'bindscrolltoupper: 滚动 到 顶部 /左边 ， 会 触发 scrolltoupper 事 件 。 
'bindscrolltolower: 深 动 到 底部 /右边 ， 会 触发 scrolltolower 事 件 。 


:bindscroll: 深 动 时 触发 ，event.detail={scrollLeft，scrollTop， 
scrollHeight, scrollWidth, deltaX, deltaY}° 


目前 ， 有 些 组 件 不 能 在 <scroll-view/> 中 使 用 : <textarea/>、 


<Video/>、<map/>、<comVas/>。 


下 面 我 们 通过 <scroll-view/> 创 建 一 个 纵 回 滚动 区 域 ， 并 监听 写 的 
滚动 事件 。 需 要 注意 的 是 ， 在 使 用 纵 同 滚动 时 ， 需 要 先 给 <scroll- 
view/> 一 个 国定 高 度 ， 如 图 4-4 所 示 。 


代码 如 下 : 


图 4-4 “可 滚动 视图 区 


<scroll-view class="scroll-container" upper-thresho1ld="0" 
lower-threshold="100" scroll-into-view="{{toView}}" 


bindscroll="scroll" 


bindscrolltolower="scrollToLower" 


bindscrolltoupper="scrollToUpper" scroll-y="true" 
scroll-top="{{scrollTop}}"> 


<view id="item-1" 
<view id="item-2" 
<view id="item-3" 
<view id="item-4" 
<view id="item-5" 
<view id="item-6" 
</scroll-view> 


class="scroll-item 
class="scroll-item 
class="scroll-item 
class="scroll-item 
class="scroll-item 
class="scroll-item 


bg-red">1</view> 
bg-blue">2</view> 
bg-red">3</view> 
bg-blue">4</view> 
bg-red">5</view> 
bg-blue">6</view> 


<view class="act"> 闻 . 
<button bindtap="scroll1ToTop"> 点 击 深 动 到 顶部 </button> 
</view> 


/* 给 予 固 定 高 度 */ 

Scroll-container { 
border : solid 1px; 
height : 800rpx; 


} 


‘Scroll-container .scroll-item { 
height : 300rpx; 
width : 120%; 

} 


,bg-blue { background-color: #87CEFA; } 
,bg-red { background-color: #FF6347; } 


.act { padding : 10px; } 


Page( { 
data : { 时 
toView : 'item-3'// 第 一 次 泻 染 时 ，<scrolL1_view> 默 认 滚 动 到 id 值 为 "item-3" 
}, 


scrollToUpper : function() 
console.10g( “触发 到 滚动 顶部 事件 )， 
}, 


scrollToLower : function() { 
console.10g( ' 触 发 深 动 到 底部 事件 ' ); 
}, 


// 点 击 按钮 时 ， 滚 动 到 顶部 
scroll : function() { 

console.1og( ' 触 发 了 深 动 事件 ' ) ; 
}, 


scrollToTop : function() { 
this.setData( { 
scrollTop : '0' 


} ); 
} 
} ); 


[Xl 
这 


布局 页 面 时 ， 如 对 事件 没有 特殊 了 要求， 也 可 以 使 用 <view/> 人 代替 


<scroll-view/> 进 行 布局 。 


4.2.3” 消 块 视图 组 件 


渭 块 视图 容器 在 前 端 开发 中 是 一 个 常见 组 件 ， 利 用 它 我 们 可 以 实 
现 轮 播 图 、 汗 动 页 面 、 图 片 预 宽 等 效果 。 一 个 完整 的 滑 块 视图 组 件 由 
<swiper/> 和 <swiper-item/> 两 个 标签 组 成 ， 它 们 不 能 单独 使 用 ， 一 个 
<swiper/> 中 内 能 放置 一 个 或 多 个 <swiper-item/>， 放 置 其 他 节点 会 被 删 
除 ，<swiper-item/> 内 部 能 放置 任何 组 件 ， 默 认 宽 高 目 动 设置 为 100%。 
<Swiper-item/> 组 件 作 为 容器 没有 任何 特殊 属性 ，<swiper > 组 件 属性 如 
下 : 


-indicator-dots: 是 人 否 显 示 面 板 指 示 点 ， 默 认为 false 。 
-autoplay: 是 否 目 动 切 换 ， 默 认为 false 。 

:current: 当前 所 在 页 面 的 index， 默 认为 0。 
interval: 目 动 切换 时 间 间 隔 ， 默 认为 5000 。 
-duration: 滑动 动画 时 长 ， 默 认为 1000。 

circular: 是 否 采用 衔接 滑动 ， 默 认 值 为 false 。 


:bindchange: current 改 变 时 会 触发 change 事 件 ，event.detail= 


{current: cuUrrent}。 


1. 基 本 轮 播 图 


本 案例 主要 讲解 滑 块 视图 最 基本 用 法 ， 开 始 图 如 图 4-5 所 示 。 


暂停 | 播放 


图 4-5 ”人 简单 轮 播 示例 


示例 代码 如 下 : 


<1- 


启 默 认 


曾 板 指示 点 ， 并 设置 为 自 


动 播放 - -> 


<swiper class="banner" indicator-dots="true" autoplay="{{autoplay}}" 


current="0"” interval="2000" duration="300" bindchange="change"> 
<block wx:for="{{sliderList}}"> 
<swiper-item class="{{item.className}}">{{item.name}}</swiper-item> 
</block> 
</swiper> 


<view> | 
<button bindtap="play"> 和 暂停 | 播放 </button> 
</view> 


.banner { height : 400px; background-color: #ddd; } 


.bg-blue { background-color: #87CEFA; } 
.bg-red { background-color: #FF6347; } 
.bg-green { background-color: #43CD80; } 


Page( { 
data : { 
autoplay : true, 
sliderList : [ 


{ className : 'bg-red', name : 'slider1' }, 
{ className : 'bg-blue', name : 'slider2' }, 
{ className : 'bg-green', name : 'slider3' } 
] 
}, 


play : function() { 
this.setData( { 
autoplay : !this.data.autoplay 
/ 


了 


change : function() { 
console.1og( “执行 了 滚动 )， 


} 
} ); 
2. 目 定义 轮 播 图 


<swiper/> 上 默认 组 件 中 不 提供 面板 指示 点 的 样式 设置 ， 而 在 轮 播 组 
件 中 ， 我 们 常常 需要 设置 自 定 义 面板 指示 点 ， 这 时 可 以 通过 bindchange 
事件 实现 图 4-6 一 样 的 定义 面板 。 


图 4-6 ” 目 定 义 轮 播 


代码 如 下 : 


<view class="customSwiper"> 
<1!- -不 开局 默认 面板 - -> 
<swiper class="banner" autoplay="true" interval="2000" duration="300" 
bindchange="switchTab"> 
<block wx:for="{{sliderList}}"> 
<swiper-item> 
<image style="width:100%;height:100%;" src="{{item.imageSource}}"/> 
</swiper-item> 
</block> 
</swiper> 
<!-- 自 定义 面板 构建 - -> 
<view class="tab"> 
<block wx:for="{{sliderList}}"> 
<view wx:if="{{item.selected}}" class="tab-item 
selected">{{index+1}}</view> 
<view wx:else class="tab-item">{{index+1}}</view> 
</block> 
</view> 

</view> 

.CUStomSwiper { height : 379.5rpx; position: relative; } 

.CUStomSwiper swiper{ height : 100%; } 

/* 自 定义 面板 样式 */ 

.tab { height : 7Orpx; position: absolute; bottom : 0; display: flex; 
width : 100%; text-align: center; justify-content : center,; 
align-items: center,; } 

.tab .tab-item{ background-color: #ccc; height : 5Orpx; width : 5Orpx; 
line-height: 5S5Orpx; font-size : 12rpx; color : #fff; border-radius: 4px; 
margin-right : 10px; } 

.tab .tab-item.selected { background-color: red; } 

Page( { 

data : { 


'./image/banner1.jpg' }, 


sliderList : [ 
{ selected : true, imageSource : 
{ selected : false, imageSource : './image/banner2.jpg' }, 
: false, imageSource : './image/banner3.jpg' } 


{ selected 


ed 

/7 监听 swiper 深 动 事件 ， 并 切换 面板 

switchTab : function( e ) { 
var sliederList = this.data.sliderList, 


i, 1; 
// 修 改 指示 点 选中 态 
for ( i = 0; item = sliederList[il]; ++i ) { 
= e.detail.current == i; 


item.selected 


} 
this.setData( { 
sliderList : sliederList 


} ); 


4.3 ”基础 组 件 


4.3.1 icon 


<icon/> 是 页 面 中 非常 党 用 的 组 件 ， 它 通常 用 于 表示 状态 ， 起 到 引 
导 作用 。 在 HTML 中 ， 我 们 通常 通过 修改 元 取样 式 、 添 加 图 片 等 方案 实 
现 岁 标 ， 在 <icon/> 中 ， 官 方 为 大 家 提供 了 一 父 符 合 微 信 设 计 规 艺 的 样 
式 类 型 ， 当 然 我 们 也 可 以 通过 上 自 定义 样式 创建 自 定 义 图 标 。<icon/> 有 
以 下 属性 : 


-type: icon 的 类 型 。 有效 值 包括 : success、Success_no_circle、 


info ~、 warn 、 waiting ~、 cancel 、 download 、search 、dlear ° 
size: icon 的 大 小 ， 单 位 px。 默 认 值 为 23px。 
:color: icon 的 颜色 ， 同 CSS 的 color 。 
1. 示 例 


<icon/> 的 使 用 十 分 简单 ， 下 面 为 大 小 不 同 、 不 同类 型 、 不 同 颜色 
的 图 标 展示 ， 如 图 4-7 所 示 。 
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图 标 大 小 展示 


SUCCeSSDX success no_circlepx 


safe_successpx success_circlepx 


info_circlepx 


@ 


Waitine circlepx 


safe warnpx 


downloadpx 


clearpx 


图 标 颜色 展示 


color ereen color:reb (139, 101, 8) 


图 4-7” icon 示例 


代码 如 下 : 


<view class="section size"> 
<view class="title"> 图 标 大 小 展示 </view> 
<view class="]list"> 
<block wx:for="{{sizeList}}"> 
<view class="item"> 
<icon type="success no_circle" size="{{item}}"/> 
<label>{{item} }px</label> 
</view> 
</block> 
</view> 
</view> 
<view class="section"> 
<view class="title"> 图 标 类 型 展示 </view> 
<view class="]list"> 
<block wx:for="{{typeList}}"> 
<view class="item"> 
<icon type="{{item}}" size="30"/> 
<label>{{item} }px</label> 
</view> 
</block> 
</view> 
</view> 
<view class="section"> 
<view class='"tit1le"> 图 标 颜 色 展 示 </Vview> 
<view class="]list"> 
<block wx:for="{{colorList}}"> 
<view class="item"> 
<icon type="info" color="{{item}}"/> 
<label>color:{{item}}</label> 
</view> 
</block> 
</view> 
</view> 


.Section{ font-size : 12px; padding : 10px; } 

.Section .list{ display:flex; flex-wrap : wrap; } 

.Section .list .item { width : 300rpx; padding : 5px 0; display: flex; 
flex-direction:column; justify-content:flex-end; } 

.Section,.size .list .item { width : 100rpx; padding : 0; } 

.Section .list .item label { text-align: center,; } 

.Section .list .item icon { text-align: center; } 


Page( { 
data : { 
/不 同 
size : 
/* 不 同类 型 */ 
typeList : ['success','success no_circle', 'safe_ success', 
'success_circle', 'info','info_circle', 'waiting', 
'waiting_circle', 'warn', 'safe warn', 'circle', 'download', 
'cancel', 'search', 'clear'], 

/* 不 同 颜色 */ 

colorList : ['green', 'rgb(139,101,8)'] 


El 
eb 
Wn 
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[10, 20, 30, 40], 


}, 
} ); 


2. 目 定义 样式 <icon/> 组 件 


虽然 官方 为 大 家 预 设 了 一 些 常用 的 样式 ， 但 是 在 项 目 中 我 们 常 各 
会 使 用 目 定 义 的 UI 风格 ， 这 时 就 需要 创造 目 定义 样式 的 <icon/> 组 件 ， 
图 4-8 所 示 的 案例 中 我 们 将 通过 固定 <icon/> 大 小 、 位 移 、 背 景 图 实现 目 
定义 图 标的 效 采 ， 如 图 4-9 所 示 。 这 种 方式 在 网 页 布局 中 十 分 常见 ， 在 
小 程序 中 的 使 用 也 完全 一 致 。 虽 然 这 种 实现 方式 适合 大 部 分 标签 ， 但 


使 用 <icon/> 标 签 更 符合 语义 。 
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图 4-8 ”图 标 至 景 图 
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图 4-9 ” 目 定 义 icon 


代码 如 下 : 


<icon class="myicon home"/> 
<icon class="myicon arrow"/> 
<icon class="myicon sun"/> 
<icon class="myicon refresh"/> 


/* 固 定 背 景 图 与 图 标 大 小 */ 

.myicon{ background: url( ./image/icons.jpg ) no-repeat; background-size: 
1100rpx 826rpx; width : 60rpx; height : 60rpx; } 

/* 移 动 背 景 位 置 ， 实 现 不 同 icon*/ 

.myicon.arrow{ background-position: -90rpx -185rpx; } 

.myicon.home{ background-position: -520rpx -90rpx; } 

.myicon.sun{ background-position: -90rpx -575rpx; } 

.myicon.refresh{ background-position: -730rpx -476rpx; } 


.myicon { margin-right: 20rpx; } 


示例 中 ， 根 据 微 信 提 供 的 特性 我 们 使 用 了 rpx 单 位 ， 让 <icon/> 具 有 
目 适 用 功能 。<icon/> 是 项 目 中 第 用 的 组 件 ， 开 发 过 程 中 应 尽量 使 用 小 
程序 提供 的 系统 样式 ， 这 能 保证 小 程序 在 微 信 系统 中 UI 风格 的 一 致 
性 。 对 于 某 些 特殊 情况 ， 我 们 可 以 在 系统 图 标 基 础 上 进行 拓展 ， 满 足 


开发 需要 。 


4.3.2 text 组 件 


<text/> 组 件 主要 用 于 文本 内 容 的 展示 ， 类 似 HTML 中 <p/> 标 签 ， 在 
小 程序 中 ， 只 有 <text/> 节 点 内 部 的 内 容 能 被 长 按 选 中 ， 大 家 在 展示 文 
本 的 时 候 一 定 要 根据 这 个 特性 注意 场景 的 使 用 。<text/> 是 行内 元 素 ， 
除了 组 件 共同 属性 外 并 没有 提供 其 他 属性 ， 文 本 中 的 内 容 文 持 园 义 字 
符 %*， 稼 用 的 转 义 字符 可 以 参考 网 络 资料 。<text/> 组 件 内 只 文 持 
<text/> 嵌 套 ， 这 样 我 们 能 通过 幅 套 <text/> 实 现 某 些 字符 加 粗 、 标 红 等 特 
殊 样式 的 设置 。 


<text/> 用 法 非常 简单 ， 将 文本 放置 到 <text> 标 金 中 间 即 可 ， 在 示例 
中 "to 较 义 符 都 都 被 正音 转译 ， 如 图 4-10 所 示 。 
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我 是 内 容 
我 是 内 容 我 是 内 容 


图 4-10 ”text 组 件 示 例 


代码 如 下 : 


<text>{{content}}</text> 


: { 
content : ' 我 是 内 容 \n 我 是 内 容 \t 我 是 内 容 ' 


小 程序 中 没有 <em/><strong 放 > 等 标签 ， 不 过 我 们 可 以 通过 <text/> 赂 
套 、 设 置 样式 达到 同样 的 效果 。 


4.3.3 progress 组 件 


<progress/> 用 于 显示 进度 状态 ， 比 如 资源 加 载 、 用 户 资 料 完成 度 、 
媒体 资源 播放 进度 等 。 目 前 ，<progress/> 是 通用 的 进度 条 组 件 ， 我 们 也 
可 以 利用 各 种 布局 、 样 式 实现 一 套 目 定 义 进度 条 。progress 是 块 级 元 
素 ， 属 性 如 下 : 


-percent: 当前 进度 占 所 有 进度 的 百分比 ， 取 值 区 间 为 0 到 100 。 


.Show-info: 是 否 在 进度 条 右 侧 显示 百分比 ， 默 认为 false 。 
stroke-width: 进度 条 线 的 宽度 ， 单 位 px， 默 认 值 为 6。 


.color: 进度 条 颜色 ， 默 认 值 为 #09BB07。 


-active: 演 染 时 是 否 开 局 进度 条 从 左 到 右 的 动画 ， 默 认 值 为 false。 
开启 后 每 次 修改 percent 触 发 进度 条 重新 渲染 ， 都 会 从 左 到 右 显 示 动 


男 。 


下 面 简单 展示 进度 条 的 相关 属性 ， 如 图 4-11 所 示 。 
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图 4-11 ”progress 示 例 


代码 如 下 : 


<progress percent="20"></progress> 

<progress percent="30" show-info="true"></progress> 
<progress percent="40" stroke-width="40"></progress> 
<progress percent="50" color="#CD5555"></progress> 
<progress percent="60" active></progress> 


天 -一 


4.4 表单 组 件 


表单 是 应 用 中 获取 用 户 输入 的 重要 手段 ， 它 对 于 系统 极其 重要 ， 
用 户 在 应 用 中 输入 的 大 部 分 内 容 部 是 在 表单 元 素 中 完成 的 。 本 市 主要 
为 大 家 介绍 表单 相关 组 件 、 特 性 、 组 件 之 间 的 关系 。 如 何 将 数据 上 传 
至 后 台 会 在 第 5 草 中 介绍 。 本 蔬 中 提 到 的 表单 组 件 不 仅 可 以 放置 在 
<form/> 标 签 中 使 用 ， 同 时 也 可 以 作为 单独 组 件 和 其 他 组 件 混合 使 用 。 


4.4.1 _ radio 组 件 


单项 框 可 以 用 来 生成 一 组 单 选 按钮 ， 供 用 户 从 一 批 固定 的 选项 中 
作出 选择 ， 它 适合 于 可 用 有 效 数 据 不 多 的 情况 ， 小 程序 中 单 选 框 是 由 
<radio-group/> (单项 选择 侨 ) 和 <radio/> ( 单 选项 目 ) 两 个 组 件 组 合 而 
成 ， 一 个 包含 多 个 <radio/> 的 <radio-group/> 表 示 一 组 单 选项 ， 在 同一 组 
单 选 项 中 的 <radio/> 是 互 扩 的 ， 当 一 个 按钮 被 选中 ， 之 前 选中 的 按钮 台 
变 为 非 选 中 。 当 需要 用 户 在 待 选 项 中 选择 唯一 的 答案 时 ， 就 需要 使 用 
到 单项 框 。 


1.radio-group 


在 小 程序 中 <radio/> 不 能 单独 使 用 ， 同 一 组 <radio/> 需 要 包含 在 一 
个 <radio-group/> 中 ， 这 样 才能 形成 一 组 单项 选择 按钮 ，<radio/> 的 选中 
态 不 能 直接 获取 ， 需 要 通过 <radio-group/> 的 change 事 件 进行 获取 。 
<radio-group/> 内 部 除了 包含 <radio/> 也 可 以 包含 其 他 标签 ， 它 更 像 是 一 
个 看 不 见 的 容 希 ， 当 包含 其 他 标签 时 ， 也 仅仅 对 标签 内 部 的 <radio/> 产 
影响 ， 而 不 影响 其 他 组 件 。<radio-group/> 仅 有 一 个 属性 : 


bindchange: 绑 定 <radio-group/>change 事 件 ，<radio-group/> 中 的 选 
中 项 发 生变 化 时 触发 change 事 件 ，event.detail={value: 选中 项 radio 的 


value} ° 


2.radio 
<radio/> 是 <radio-group/> 中 的 一 个 单 选 按钮 ， 具 有 以 下 属性 : 


value: <radio/> 标 识 。 当 该 <radio/> 选 中 时 ，<radio-group/> 的 


change 事 件 会 携带 <radio/> 的 value 。 


:checked: 当前 <radio/> 是 否 选中 ， 一 个 <radio-group/> 中 只 能 有 一 
个 <radio/> 的 checked 为 tue， 如 果 设 置 多 个 ， 将 默认 选中 最 后 一 个 为 true 
的 单 选项 ， 默 认为 false 。 


disabled: 是 人 否 末 用， 人 禁用 后 不 能 点 击 ， 默 认为 false。 
.color: radio 的 颜色 ， 同 CSS 的 color 。 


3. 示 例 


这 里 为 大 家 编写 一 组 单 选 项 ， 以 展示 <radio-group/> 和 <radio/> 的 天 
系 ， 如 图 4-12 所 示 。 


代码 如 下 : 


<radio-group bindchange="changeChoosed"> 
<view wx:for="{{radios}}"> 
<radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.text}} 
</view> 
</radio-group> 
Page( { 
data : { 
radios : [ 
{value : '1',text : "选项 1' ,checked : false }, 
{value : '2',text : “选项 2'，checked : true}, 
{value : '3',text : “选项 3"，checked : false}， 
{value : '4',text : ' 选 项 4',，checked : false} 


] 


changechoosed 和 


console.1og( “你 选 


} 
} ); 
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+ event.detail.value ); 
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图 4-12 radio 示例 


点 击 案例 中 的 单 选 框 会 发 现 ， 调 斌 工具 控制 台 会 打印 出 当前 选中 


的 项 的 value 值 。 在 这 个 案例 中 点 击 文案 是 


\ 能 选中 单 选 框 的 ， 这 种 体 


难 略 过， 我 们 可 以 使 用 <label/> 对 其 进行 优化 ， 具 体 使 用 方式 可 以 参考 


label 组 件 。 


4.4.2 ”checkbox 组 件 


与 单 选 框 一 样 ， 小 程序 中 的 复 选 也 是 由 <checkbox-group/> (多 项 
选择 器 ) 和 <checkbox/> (多 选项 目 ) 两 个 组 件 组 合 而 成 。 一 个 包含 多 
Pe ， 一 组 多 选项 允许 
在 待 选项 中 选中 一 项 以 上 的 选 


1.checkbox-group 


与 <radio-group/> 一 样 ，<checkbox-group/> 用 于 包 右 <checkbox/>， 
而 且 仅 有 一 个 属性 bindchange: 绑 定 <checkbox-group/>change 事 件 ， 
<checkbox-group/> 中 的 选中 项 发 生变 化 时 触发 change 事 件 ， 
event.detail={value: [选中 项 checkbox 的 value 数 组 ]}。 


2.checkbox 


<checkbox/> 是 <checkbox-group/> 中 的 一 个 多 选项 目 ， 它 的 属性 和 
<radio/> 一 样 : 


:value: <checkbox/> 标 识 ， 选 中 时 触发 <checkbox-group/> 的 change 
事件 ， 并 携带 <checkbox/> 的 value。 


checked: 当前 <checkbox/> 是 否 选 中 ， 可 用 来 设置 默认 值 ， 一 
<checkbox-group/> 人 允许 一 个 或 多 个 <checkbox/> 的 checked 为 true， 默 认 


为 false 。 


江 


用 后 不 能 点 击 ， 稚 认为 false。 


disabled: 是 否 禁用 ， 


3. 示 例 


我 们 通过 示例 为 大 家 演示 复 选 框 的 使 用 ， 如 图 4-13 所 示 。 
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图 4-13 ” 复 选 框 示 例 


代码 如 下 : 


<checkbox-group bindchange="checkboxChange"> 
<view wx:for="{{countrys}}"> 
<checkbox value="{{item.value}}" checked="{{item.checked}}" 
disabled="{{item.disabled}}" /> 
{{item.name}} 


</view> 
</checkbox-group> 
Page( { 
data : { 
countrys : [ 
{ name : “中 国 '，Value : '1' }, 
{ name : ' 关 国 ',， value : '2', checked : true }, 
{ name : ' 日 本 ', value : '3', disabled : true }, 
{ name : ' 韩 国 ',，value : '4' }, 
{ name : ' 俄 罗斯 ',，value : '5',， checked : true } 
] 
}, 
checkboxChange : a e)i 
console.10g( ' 你 选中 的 项 目 有 : ' + e,detail,value ); 
} 
} ); 


整体 来 看 复 选 框 和 单 选 框 的 使 用 方式 基本 一 致 ， 最 大 的 区 别 在 于 
交互 上 单 选 框 在 同一 组 单 选 项 中 只 能 选中 一 个 ， 而 复 选 框 可 以 选中 多 

选中 状态 切换 时 change 方 法 传 入 的 参数 值 一 个 是 传 入 单 值 ， 一 个 是 
传 和 人 数组。 大 家 可 以 将 两 个 组 件 对 比 学 习 。 


4.4.3 switch 组 件 


<switch/> 是 一 个 可 以 在 两 种 状态 切换 的 开关 选择 侣 ， 现 在 很 多 
APP 都 在 使 用 ， 最 常见 的 就 是 OS 或 Android 的 系统 开关 。<switch/> 在 
功能 上 和 <checkbox/> 有 点 接近 ， 不 同 点 在 于 <switch/> 是 个 单独 控件 ， 
而 <checkbox/> 是 由 多 个 单 选项 组 合 而 成 ， 在 小 程序 中 当 <switch/> 的 
type 属 性 值 为 checkbox 时 ， 它 的 UI 表现 和 <checkbox/> 非 常 接近 。switch 
属性 如 下 : 


.checked: 是 否 选中 ， 默 认为 false。 


type: <switch/> 的 UI 样式 ， 有 效 值 为 switch、checkbox， 默 认为 


switch ° 


:bindchange: checked 改 变 时 触发 change 事 件 ，event.detal={value: 
checked} ° 


<switch/> 非 常 容易 理解 ， 大 家 主要 了 解 它 的 两 种 UI 状态 ， 示 例如 
图 4-14 所 示 。 
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图 4-14 switch 示例 


代码 如 下 : 


<view wx:for="{{1list}}"> 
<switch data-name="{{item.name}}" type="{{item.type}}" 
checked="{{item.checked}}" bindchange="{{item.changeEventName}}"/> 
</view> 


Page( { 
data : { 
switchs : [ 


name : "Switch1'， 
checked : false, 
type : 'switch',， /* 滑 块 样式 */ 
changeEventName : 'change' 
}, 
{ 
name : "Switch2 '， 
checked : true, 


type : 'checkbox'， /* 选择 框 样 
changeEventName : 'change' 


] 
}, 


// 修改 开关 选择 器 对 象 模型 的 选中 值 
change : function( e ) { 
var name = e.currentTarget.dataset.name, 
Switchs = this.data.switchs, 
a SS 


for (1i= 0; s = switchs[i]; ++i ) { 


If ( s.name == name 
s.checked = e.detail.value,; 
break; 
} et . 
console.1og( name +“' 的 选中 态 为 : ' + e,detail.value ); 


} 
} ); 
示例 change 方 法 中 我 们 根据 用 户 的 操作 反 辣 修改 了 数据 模型 中 对 


应 的 值 ， 页 面 进 行 数据 绑 定 后 你 证 数据 状态 和 页 面 状 态 一 致 是 非常 关 
键 的 ， 在 项 目 过 程 中 大 家 一 定 要 注意 。 


4.4.4 1label 组 件 


在 <radio/> 和 <checkbox/> 案 例 中 ， 点 击 文 案 时 不 能 选中 对 应 的 单 选 
框 或 复 选 框 ， 这 时 我 们 可 以 利用 <label/> 改 进 表 单 组 件 的 可 用 性 ， 通 过 
绑 定 for 属 性 让 用 户 点 击 <label/> 时 触发 对 应 的 控件 ， 目 前 可 以 绑 定 的 欣 


件 有 <button/>、<checkbox/>、<radio/>、<switch/>。 


小 程序 中 <label/> 的 触发 规则 有 两 种 : 


-将 控件 放 在 标签 内 。 当 用 户 后 击 时 触发 中 第 一 个 控件 。 


:设置 <label/> 的 for 属 性 。 当 用 户 点 击 时 触发 for 属 性 对 应 的 控件 。 
for 属 性 优先 级 高 于 内 部 控件 。 


<label/> 只 有 一 个 for 属 性 : 绑 定 控件 的 id 。 


下 面 的 示例 (如 图 4-15 所 示 ) 只 是 为 了 展示 label 的 特性 ， 一 些 奇怪 
的 使 用 方式 并 不 推荐 在 项 目 中 使 用 。 
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点 击 文案 也 能 选中 radio 


点 击 文案 切换 开关 


选中 元 素 内 第 一 个 
第 一 个 | 第 二 -1 


for 属 性 优先 级 大 于 内 部 元 素 
label 内 部 元 素 剧 1abel 内 部 元 素 时 1abel 四 部 元 素 


图 4-15 label 示 例 


代码 如 下 : 


<view class="section"> 
<!-- 点 击 文案 仍然 能 触发 <checkbox-group/> 的 change 事 件 --> 
<checkbox-group bindchange="checkboxchange"> 
<label> 
<checkbox value="value-1"/> 点 击 文案 也 能 选中 radio 
</label> 
</checkbox-group> 
</view> 


<view class="section"> 
<label> 
<switch/> 点 击 文案 切换 开关 
</label> 
</view> 


<view class="section"> 
<view class="title"> 选 中 元 素 内 第 一 个 </view> 


<checkbox-group> 
<label> 
<checkbox value="value-1"/> 第 一 个 
<checkbox value="value-2"/> 第 二 个 
<checkbox value="value-3"/> 第 三 个 
<checkbox value="value-4"/> 第 四 个 
<checkbox value="value-5"/> 第 五 个 
</label> 
</checkbox-group> 
</view> 


<view class="section"> 
<view class="title">for 属 性 优先 级 大 于 内 部 元 素 </view> 
<checkbox-group> 
<label for="mycheckbox"> 
<checkbox/>1label 内 部 元 素 
<checkbox/>1label 内 部 元 素 
</label> 
<checkbox id="mycheckbox"/>label 外 部 元 素 
<checkbox-group/> 
<view> 


.Section { font-size : 12px; padding: 20px 10px; border-top : solid 1px #eee; } 
.Section .title { padding : 5px 0; margin-bottom: Spx; display : block; } 
.Section input { border : solid 1px #ccc; background-color: #fff; border-radius: 
4px; } 
Page( { 
checkboxchange : function( event ) { 
console.log( event.detail.value ); 


} 
} ); 


上 上 例 中 ，<label/> 元 素 内 崩 套 了 多 个 组 件 ， 我 们 点 击 <label/> 中 所 有 
字符 都 选中 第 一 个 控件 ， 但 是 点 击 单个 <checkbox/> 仍 然 可 以 修改 其 选 
状态 ， 这 样 的 交互 体验 是 混乱 的 ， 所 以 在 实际 项 目 中 ， 一 个 <label/> 
& 量 只 包 衰 一 个 组 件 。 


4.4.5 slider 组 件 


滑动 选择 万 全 一 种 在 移动 端 音 用 的 交互 组 件 ， 大 家 还 记得 手机 上 
的 亮度 调节 工具 吗 ? 那 束 是 消 动 选择 器 ， 在 小 程序 中 我 们 可 以 利用 
<slider> 快 速生 成 一 个 符合 系统 UI 的 滑动 选择 器 。 滑 动 选择 磊 一 般 有 水 
平和 垂直 两 种 ， 小 程序 中 只 提供 了 水 平 的 形式 ， 请 动 到 最 左边 是 最 小 
值 ， 滑 动 到 右边 是 最 大 值 。<slider/> 属 性 如 下 : 


min: 最 小 值 ， 默 认 值 为 0。 
max， 最 大 值 ， 默 认 值 为 100 。 


step: 步 长 ， 取 值 必须 大 于 0， 并 且 可 被 max-min) 整除 ， 默 认 
值 为 1。 


disabled: 是 否 禁用 ， 默 认 值 为 false。 


value: 当前 取 值 ， 默 认 值 为 0。value 值 应 该 在 max 和 min 的 区 间 苞 
围 内 ， 设 置 后 滑 块 会 滚动 到 对 应 位 置 。 


.color， 背 景 条 的 颜色 ， 默 认 值 为 #e9e9e9 。 


“selected-color: 已 选择 的 颜色 ， 默 认 值 为 圾 aad19 。 


.Show-value: 有 是否 在 右 侧 显示 当前 value。 


:bindchange: 完成 一 次 拖 动 后 触发 的 事件 ，event.detail={value: 


value} ° 


本 示例 中 我 们 创建 两 个 滑动 选择 器 ， 分 别 绑 定 change 事 件 用 于 控制 
图 标的 大 小 和 透明 度 ， 如 图 4-16 所 示 。 
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调整 图 标 大 小 : 


调整 透明 度 : 


Console 


图 4-16 ”slider 示 例 


代码 如 下 : 


<view class="section icon-wrapper"> 
<icon type="success" size="{{icon.size}}" 
style="opacity:{{icon.opacity/10}};"/> 
</view> 


<view class="section"> 
<view> 调 整 图 标 大 小 :</view> 
<slider show-value max="100" min="10" step="5" value="{{icon.size}}" 
bindchange="changeSize"></slider> 


</view> 


<view class="section"> 
<View> 调 整 透 明度 :</view> 
<slider Show-value max="10" min="0O" step="1" value="{{icon.opacity}}" 
bindchange="changeOpacity"></slider> 
</view> 


.Section { padding : 10px; } 
.Section.icon-wrapper { height : 100px; font-size : 12px; } 


Page( { 
data : { 
Icon : { 
size : 20, 
opacity : 8 


}, 

/* 改变 大 小 */ 

changeSize : function( e ) { 
this.data.icon.size = e.detail.value; 
this.setData( this.data ); 


}, 
/* 改变 透明 度 */ 
changeOpacity : function( e ) { 
this.data.icon.opacity = e.detail.value,; 
this.setData( this.data ); 
} 
} ); 


滑动 选择 融 在 移动 端 区 互 体 难 优 于 字符 输入 ， 在 项 目 中 一 些 数值 
输入 项 都 可 以 考虑 使 用 滑动 计 择 紫 代 鬼 。 


4.4.6 ”picker 组 件 


<picker/> 可 以 在 屏幕 底部 弹出 一 个 窗口 ， 供 用 户 在 所 提供 的 选择 
项 中 选择 一 个 。<picker/> 本 身 不 会 向 用 户 呈 现任 何 特殊 效果 ， 像 
<checkbox-group/> 一 样 用 于 包 误 其 他 组 件 ， 点 击 <picker/> 包 于 内 的 元 素 
a eo enn 普通 选择 器 、 时 间 
选择 器 和 日 期 选择 器 ， 默 认 是 普通 选择 器 ， 这 三 种 选择 器 在 细节 上 略 
有 不 同 ， 我 们 可 以 通过 设置 <picker/> 组 件 mode 属 性 值 切换 不 同 选择 


口 日 


有 他 O 
1. 普 通 选 择 天 


普通 选择 需 是 默认 的 滚动 选择 器 ， 我 们 只 需要 绑 定 数组 类 型 的 数 
据 束 能 直接 使 用 ， 对 应 的 mode 属 性 值 为 selector， 普 通 选 择 器 具有 以 下 
属性 : 


Tange: 压 部 弹出 选项 的 数组 ， 默 认 值 为 一 个 空 数组 []。 只 有 当 的 
mode 为 selector 时 ，range 属 性 才 有 效 。 


Tang-key: 当 range 是 一 个 Object Array 时 ， 通 过 rang-key 来 指定 
Object 中 key 的 值 作为 选择 器 显示 内 容 。 


value: mode 为 selector 时 ，value 值 是 数字 ， 表 示 选 择 了 range 中 的 


第 几 个 ， 从 0 开始 。 


:bindchange: value 改 变 时 触发 change 事 件 ，event.detail={value: 
value} ° 
-disabled: 是 否 禁 用 ， 默 认 值 为 false 。 


后 | 


在 下 面 的 示例 中 我 们 创建 了 一 个 <view/> 组 件 用 于 布局 ， 点 击 后 显 


示 相 应 选项 ， 如 图 4-17 所 示 。 


代码 如 下 : 


<picker value="{{selectedIindex}}" range="{{list}}" bindchange="change"> 
<view class="picker"> 

当前 选中 : {{list[selectedIndex]}} 
</view> 

</picker> 


.picker{ border:solid 1px #ddd; background-color: #fafafa; padding : 10px; } 


data : { 
// 创 建 对 应 选择 项 
list : [ 
' 选 项 1 '， 
' 选 项 2'， 
' 选 项 3 


], 
selectedIndex : 0 


}, 
change : function( e ) { 
// 修 改选 中 项 文案 
this.setData( { 
selectedIndex : e.detail.value 


} ); 
} 
} ); 
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当前 选中 :选项 1 


Console 


图 4-17 普通 选择 器 示例 
2. 时 间 选 择 器 


在 普通 选择 器 基础 上 ，<picker/> 提 供 了 时 间 选 择 右 ， 对 应 的 mode 
属性 值 为 ime， 时 间 选 择 融 具有 以 下 属性 : 


value: 表示 选中 的 时 间 ， 字 符 串 格式 为 "hh: mm”， 默 认为 空 。 


start: 表示 有 效 时间 艺 围 的 开始 ， 字 符 昌 格式 为 "hh: mm”， 默 认 
值 为 空 。 


-end: 圾 示 有 效 时 间 苑 围 的 结束 ， 字 符 串 格式 事 为 "hh: mm”， 私 
认 值 为 空 。 


'bindchange: value 改 变 时 触发 change 事 件 ，event.detail={value: 


value} ° 
disabled: 是 否 禁用 ， 默 认 值 为 false。 


下 面 举例 说 明 ， 如 图 4-18 所 示 。 
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图 4-18 ”时 间 选 择 器 示例 


代码 如 下 : 


<picker value="{{selectTime}}" mode="time" start="{{startTime}}" 
end="{{endTime}}" bindchange="change"> 
<view class="picker"> 
当前 选中 : {{selectTime}} 
</view> 
</picker> 


E 


.picker{ border:solid 1px #ddd; padding : 10px; } 


Page( { 
data : { 
startTime : "00:00", 
endTime : "24:00", 
selectTime : "11:30" 


}, 
// 修 改选 中 项 文案 
change : function( e ) { 
this.setData( 
selectTime : e.detail.value 


} ); 


3. 日 期 选择 器 
日 期 选择 器 对 应 的 mode 属 性 为 date， 属 性 如 下 : 


-value: 表示 选中 的 日 期 字符 串 格 式 为 “yyyy-MM-dd”， 默 认 值 为 


start: 表示 有 效 日 期 范围 的 开始 ， 字 符 串 格式 为 “yyyy-MM-dd”。 
-end: 表示 有 效 日 期 范围 的 结束 ， 字 人 符 串 格式 为 "yyyy-MM-dd”。 


fields: 表示 选择 器 的 粒度 ， 有 效 值 为 year、month、day， 默 认 值 
为 day 


:bindchange: value 改 变 时 触发 change 事 件 ，event.detail={value: 


value} ° 
.disabled: 是 否 禁用 ， 默 认 值 为 false。 


下 面 举例 说 明 ， 如 图 4-19 所 示 。 
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图 4-19 日 期 选择 器 示例 


代码 如 下 : 


<picker value="{{selectDate}}" mode="date" start="{{startDate}}" 
end="{{endDate}}" filed="day" bindchange="change"> 
<view class="picker"> 
当前 选中 : {{selectDate}} 
</view> 
</picker> 


E 


.picker{ border:solid 1px #ddd; padding : 10px; } 


Page( { 

data : { 
startDate : "2016-02-01", 
endDate : "2016-12-30", 
selectDate : "2016-10-10" 

}, 

change : function( e ) { 
this.setData( { 

selectDate : e.detail.value 


} ); 
} 
} ); 


4.4.7 ”picker-view 组 件 


<picker/> 一 共 提 供 了 3 类 选择 器 ， 这 3 类 选中 右 在 模式 、 交 互 上 痢 
比较 固定 ， 而 在 业务 场景 中 我 们 可 能 会 涉及 多 种 形态 选择 船 ， 针 对 这 
种 情况 ， 小 程序 提供 了 <picker-view/> 用 于 实现 自 定义 滚动 选择 器 ， 在 
<picker-view/> 中 我 们 能 按 目 己 意愿 插入 任意 数量 列 ， 同 时 也 能 设置 整 
个 <picker-view/> 样 式 。 一 个 完整 的 <picker-view/> 包 含 两 个 标签 : 
<picker-view/> 和 <picker-view-column/>，<picker-view-column/> 用 于 创 
建 列 ， 列 中 孩子 世上 点 高 度 会 自动 设置 为 <picker-view/> 的 选中 框 高 度 ， 
<picker-view/> 中 仅 可 放置 <picker-view-column/>， 放 置 其 他 节点 不 会 显 
示 。<picker-view/> 属 性 如 下 : 


value: 数组 类 型 ， 数 组 中 的 数字 依次 表示 <picker-view/> 内 的 
<picker-view-colume/> 选 择 的 第 几 项 (下 标 从 0 开始 ) ， 数 字 大 于 
<picker-view-column/> 可 选项 长 度 时 ， 选 择 最 后 一 项 


-indicator-style: 设置 选择 絮 中 间 选 中 框 的 样式 。 


:bingchange: 当 深 动 选 择 ，value 改 变 时 触发 change 事 件 ， 
event.detail={value: value}; value 为 数组 ， 表 示 picker-view 内 的 picker- 
view-column 当 前 选择 的 是 第 几 项 (下 标 从 0 开始 ) 。 


下 面 用 示例 说 明 ， 如 图 4-20 所 示 。 本 示例 基于 <picker-view/> 实 现 
一 套 电 商 系统 常用 的 配送 时 间 选 择 器 ， 每 个 日 期 对 应 一 套利 己 的 配送 
时 段 ， 每 次 切换 日 期 ， 对 应 的 时 段 也 会 进行 相应 切换 。 
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图 4-20 目 定 义 滚动 选择 占 
代码 如 下 : 


<view class="custom-picker"> 
<view class="title"> 

自 定义 滑动 选择 器 

</view> 

<!-- 设置 内 部 选中 选项 高 度 - -> 

<picker-view indicator-style="height:80px;" bindchange="changeTime"> 


<!-- 日 期 列 --> 
<picker-view-column> 
<view class="cell" wx:for="{{1]1ist}}" wx:key="index"> 
{{item.date}} 
</view> 
</picker-view-column> 
<!-- 时 段 列 --> 
<picker-view-column> 
<block wx:for="{{1list}}" wx:key="{{index}}" wx:if="{{item.selected}}"> 
<view class="cell" wx:for="{{item.times}}" wx:for-index="subIndex" 
wx:for-item="subItem" wx:key="subIndex"> 
{{subItem.time}} 
</view> 
</block> 
</picker-view-column> 
</picker -view> 
</view> 


.CUStom-picker { top : 100px;width :80%; margin: 0 auto; margin-top : 200rpx; 

border:solid 1px #ccc; } 

.CUStom-picker .title { text-align:center;color:#444; padding : 20rpx; 
font-size:24rpx; background-color:#eee;border-bottom:solid 1px #ccc } 

.CUStom-picker picker-view{ height:200px; } 

.CUStom-picker picker-view .cell { text-align: center; line-height: 80px; } 

.CUStom-picker picker-view-column { border-right:solid 1px #ccc; position: 

relative; left : 1px; } 


Page( { 
data : { 

list : [{ 
date : '12 月 27 日 "， 
selected : true, 
times : [{time : '19:00'},{time : '19:30'},{time : '20:00'}, 
{time : '20:30'},{time : '21:00'}] 

},4 
date : '12 月 28 日 "， 
selected : false, 
times : [{time : '9:00'},{time : '9:30'},{time : '10:00'}, 
{time : '10:30'},{time : '11:00'}] 

},4 
date : '12 月 29 日 "， 
selected : false, 
times : [{time : '12:00'},{time : '12:30'},{time : '13:00'}, 
{time : '14:30'},{time : '15:00'}] 

}] 


}, 
// 日 期 改变 时 泻 染 对 应 时 间 
changeTime : function( e ) { 
var index = e,detail.value[9]，// 只 监控 日 期 改变 ， 时 间 改 变 忽 上 略 
list = this.data.1ist, 
i, d; 


list[i]; ++i ) { 


for (i=0;d= 
= i == index ? true : false,; 


d.selected 


} 
this.setData( this.data ) 


4.4.8 _ input 组 件 


<input/> 是 单行 输入 框 ， 用 于 收集 用 户 信息 。 根 据 不 同 的 type 属 性 
值 ， 输 入 字段 拥有 很 多 形式 ， 与 HTML 不同 的 是 小 程序 中 的 <input/> 类 
型 没有 按钮 类 型 ， 都 是 与 输入 相关 的 类 型 。<input/> 属 性 较 多 ， 但 大 部 
分 都 和 HTML 的 <input/> 相 似 ， 其 属性 如 下 : 


-value: 输入 框 的 初始 内 容 。 


:type: input 的 类 型 ， 有 效 值 为 : text、number 、idcard 、digit、 


time、date。 


:password: 是 否 显示 密码 类 型 ， 默 认为 false 。 
-placeholder: 输入 框 为 空 时 的 占 位 符 。 
:placeholder-style: 指定 placeholder 的 样式 。 


:placeholder-class: 指定 placeholder 的 样式 类 ， 默 认 值 为 input- 


placeholder ° 


disabled: 是 否 禁用 ， 默 认为 false。 


maxlength: 最 大 输入 长 度 ， 设 置 为 0 的 时 候 不 限制 最 大 长 度 ， 默 
认 值 为 140。 


:cursor-spacing: 指定 光标 与 键盘 的 距离 ， 单 位 px。 取 input 距 离 底 
部 的 距离 和 cursor-spacing 指 定 的 距离 的 最 小 值 作为 光标 与 键盘 的 距离 。 


:auto-focus: 自动 聚焦 ， 拉 起 键盘 (开发 工具 暂 不 支持 ) 。 页 面 中 


只 能 有 一 个 <input> 或 <textarea/> 设 置 auto-focus 属 性 。 


'bindinput: 当 键 盘 输 入 时 ， 和 触发 nput 事 件 ，event.detail={fvalue: 
value}， 处 理 函 数 可 以 直接 retum 一 个 字符 串 ， 将 替换 输入 框 的 内 容 。 


:bindfocus: 输入 框 聚 焦 时 触发 ，event.detail={fvalue: value}。 
:bindblur: 输入 框 失 去 焦点 时 触发 ，event.detail={value: value}。 
:bindconfirm: 点 击 完成 按钮 时 触发 ，event.detail={fvalue: value}。 


下 面 举例 说 明 (如 图 4-21) input 组 件 的 使 用 。 本 例 中 对 光标 位 置 
的 处 理 需要 大 家 多 留意 ， 其 他 大 部 分 属性 大 家 应 该 都 比较 熟悉 ， 这 里 
束 不 一 一 举例 。 
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图 4-21 ”input 示 例 


代码 如 下 : 


<view class="section"> 
<input placeholder=" 默 认 样式 ， 自 动 聚焦 " auto-focus/> 
</view> 


<view class="section"> 
<input placeholder=" 内 容 中 123 会 被 替换 为 9" bindinput="changeValue" 
type="number" maxlength="20"/> 


</view> 


<view class="section"> 
<input placeholder=" 输 入 3 个 以 上 字符 会 收 起 键盘 " bindinput="hideKeyboard" 
type="number"/> 
</view> 


.Section { font-size : 12px; padding : 10px Spx; border-bottom: dashed 1px 
#cecece; } 
.Section input { border : solid 1px #ccc; padding : © Spx; background-color: #fff; 


border-radius: 4px; height : 30px; } 


Page( { 
changeValue : function( e ) { 
console.log( e.detail ); 
var value = e.detail.value, 
pos = e.detail.cursor, 


left; 


// 计算 光标 位 置 
if ( pos != -1 ) { 
// 光标 在 中 间 位 
left = value.slice( 0，pos ) 
// 修改 后 光标 位 置 要 随 之 变化 
pos = left.replace( /123/g, '2' ).length 
} 
return 区 
Value : e.detail.value.replace( /123/g, '2' )， 


cursor : pos 


} 


}, 
hidekeyboard : function( e ) { 
If ( e.detail.value.length >= 3 ) { 
// 调 用 关闭 键 瑶 API 
wx.hideKeyboard( ); 


4.4.9 ”textarea 组 件 


<textarea/> 是 多 行 输入 框 ， 与 HIML 中 多 行 输入 框 不 一 样 的 是 ， 小 
程序 中 <textarea/> 是 一 个 目 闭 合 标 签 ， 它 的 值 需要 赋值 给 value 必 性， 而 
不 是 被 标签 包 右 。 与 <inpuy> 相 比 ， 大 部 分 属性 都 一 样 。 其 属性 如 下 : 


value: 输入 框 的 初始 内 容 。 


.placeholder: 输入 框 为 空 时 的 占 位 符 。 
:placeholder-style: 指定 placeholder 的 样式 。 


:placeholder-class: 指定 placeholder 的 样式 类 ， 默 认 值 为 textarea- 


placeholder 。 


disabled: 是 否 禁用 ， 默 认为 false。 


maxlength: 最 大 输入 长 度 ， 设 置 为 0 的 时 候 不 限制 最 大 长 度 ， 默 
认 值 为 140。 


:auto-focus: 自动 聚焦 ， 拉 起 键盘 〈 开 发 工具 和 暂 不 文 持 ) 。 页 面 中 


全 


只 能 有 一 个 <input> 或 <textarea/> 设 置 auto-focus 属 性 。 


:auto-height: 是 否 目 动 增高 ， 设 置 auto-height 时 ，style.height 不 生 
效 ， 初 始 状态 默认 为 一 行 高 度 。 
:fixed: 如 果 textarea 是 在 一 个 position: fixed 的 区 域 ， 需 要 显示 指定 


属性 fixed 为 true， 默 认 值 为 false。 


:cursor-spacing: 指定 光标 与 键盘 的 距离 ， 单 位 px。 取 textarea 距 离 
底部 的 距离 和 cursorspacing 指 定 的 距离 的 最 小 值 作为 光标 与 键盘 的 距 
离 。 默 认 值 为 0. 


'bindinput: 当 键 盘 输 入 时 ， 和 触发 nput 事 件 ，event.detail={fvalue: 
value}，bindinput 处 理 函 数 的 返回 值 并 不 会 反映 到 textarea 上 。 


-bindinput: 除了 date/time 类 型 外 的 输入 框 ， 当 键盘 输入 时 ， 触 发 
input 事 件 ，event.detail={value: value，cursor 光标 位 置 } ， 处 理 函 数 
可 以 直接 return 一 个 字符 串 ， 玲 换 输入 框 的 内 容 。 


:bindfocus: 输入 框 聚 焦 时 触发 ，event.detail={fvalue: value} 。 
:bindblur: 输入 框 失 去 焦点 时 触发 ，event.detail={value: value}。 


bindlinechange: 输入 框 行 数 变化 时 调用 ， 理 次 泻 染 时 也 会 触发 ， 
event.detail={height: 0, heightRpx: 0, lineCount: 0}:; 


:bindconfirm: 点 击 完成 时 ， 触 发 confirm 事 件 ，event.detail= 


{value: value}。 


下 面 用 示例 说 明 ， 这 个 示例 创建 了 一 个 <textarea/>， 并 在 失 焦 时 打 
印 出 当前 输入 内 容 ， 如 图 4-22 所 示 。 


动作 ”帮助 微 信 开发 者 工具 0.10.102800 一 上 |] 藉 


iPhone 4 Wi 而 MM [R Console 
i 是 top 


> 
表单 组 件 


图 4-22 ”textarea 示 例 


代码 如 下 : 


<view class="section"> 
<textarea bindblur="getValue" placeholder=" 请 输入 文案 " 
placeholder-class="textarea-holder"/> 
</view> 


.Section { font-size : 12px; padding : 10px Spx; border-bottom: dashed 1px 
#cecece; } 

.Section textarea { border : solid 1px #ccc; padding : 5px; background-color: 
#fff; border-radius: 4px; height : 50px; } 

.Section ,textarea-holder { color : red; } 


Page( { 
getValue : function( e ) { 
// 由 于 没有 bindinput 可 以 用 blur 代 替 
console. log( e.detail.value ); 


} 
} ); 


使 用 <textarea/> 时 需要 注意 以 下 几 点 : 


. 微 信 6.3.30 中 ，<textarea/> 在 列表 演 染 时 ， 新 增加 的 <textarea/> 在 
自动 聚焦 时 的 位 置 计 算 错 误 。 


:请 忽 在 scroll-view 中 使 用 <textarea/>。 


<textarea/> 的 blur 事 件 会 晚 于 页 面 上 的 tap 事 件 ， 如 果 需 要 在 button 
的 点 击 事件 获取 <textarea/>， 可 以 使 用 <form/> 的 bindsubmit 。 


:不 建议 在 多 行文 本 上 对 用 户 的 输入 进行 修改 ， 所 以 <textarea/> 的 
bindinput 处 理 玉 数 并 不 会 将 返回 值 反 映 到 <textarea/> 上 。 


4.4.10 ”button 组 件 


按钮 除了 在 应 用 中 提供 交互 功能 ， 按 钮 的 颜色 也 承载 了 应 用 的 引 
导 人 作用， 通常 在 一 个 程序 中 一 个 按钮 至 少 有 3 种 状态 ， 默认 点 击 
(default) 、 建 议 点 击 (primary) 、 订 慎 点 击 (warn) 。 在 构建 项 目 
时 ， 注 意 在 合适 的 场景 使 用 合适 的 按钮 。 当 <button/> 被 <form/> 包 更 
时 ， 可 以 通过 设置 form-type 属 性 触发 表单 对 应 的 事件 ，<button/> 组 件 
除了 系统 定制 的 几 种 类 型 ， 也 可 以 通过 在 标签 中 藤 套 其 他 组 件 实现 目 
定义 按钮 ， 其 属性 如 下 : 


:size: 表示 按钮 的 大 小 ， 有 效 值 为 default、mini， 默 认 值 为 


default。 


:type: 按钮 的 样式 类 型 ， 有 效 值 为 primary、default、warn， 默 认 
值 为 default。 


.plain: 按钮 是 否 铂 衬 ， 背 景色 透明 ， 默 认 值 为 false 。 
.disabled: 是 否 禁用 ， 默 认 值 是 false。 


-loading: 名 称 前 是 否 市 loading 图 标 ， 默 认 值 为 false。 通 常 在 表单 
提交 过 程 中 或 者 按钮 点 击 后 等 待 反馈 时 ， 就 需要 打开 loading 让 用 户 有 
感知 。 


form-type: 用 于 <form/> 组 件 ， 有 将 值 为 submit 、reset， 点 击 一 个 
位 于 <form/> 中 且 设 置 了 form-type 的 <button/> 时 ， 会 触发 <form/> 的 
submit 事 件 或 reset 事 件 。 


:hover-class: 指定 按钮 按 下 去 的 样式 类 。 当 hover-class="none" 时 ， 
没有 点 击 态 效果 ， 默 认 值 为 button-hover。button-hover 的 默认 样式 为 
{background-color: rgba (0，0，0，0.1) ; opacity: 0.7}， 如 果 想 进行 
系统 级 修改 可 以 直接 履 盖 这 个 样式 。 


-hover-start-time: 按 住 后 多 久 出 现 点 击 态 ， 单 位 野 秒 ， 默 认 值 50。 


Tover-stay-time， 手 指 松 开 后 点 击 态 保留 时 间 ， 单 位 毫秒 ， 默 认 值 
400。 


button 大 部 分 属性 都 和 样式 有 关 ， 一 些 属 性 外 的 特殊 样式 大 家 也 可 
以 通过 设置 wxss 来 实现 。 


我 们 在 下 面 的 示例 中 为 大 家 列举 了 按钮 不 同属 性 下 的 UI 状 态 ， 如 
图 4-23 所 示 ，form-type 属 性 将 在 <form/> 章 节 的 示例 中 进行 演示 : 


代码 如 下 : 


<button> 默 认 按 钮 样式 </button> 
<button size="mini">size:mini</button> 
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图 4-23 ”button 示 例 


<button type="primary">type:primary</button> 
<button type="warn">type:warn</button> 
<button plain>plain</button> 
<button disabled>disabled</button> 
<button loading>toadings/button> 
<1- - 按钮 按 下 去 后 会 变 成 红色 ”- -> 
<button hover- class="my- button-hover">hover-class:my-button-hover</button> 
<!-- 骸 套 多 媒体 的 自 定义 按钮 - -> 
<button> 
<image src="http://img.zcool.cn/community/0196df5649343c6ac7251c9471d1ie1.gif"/> 
</button> 


button { margin : 5px 0; } 
.my-button-hover { background-color: red; color : #fff; } 


4.4.11 form 组 件 


<form/> 是 本 革 最 后 一 个 也 是 本 章 最 关键 的 一 个 组 件 ， 它 用 于 骸 套 
本 章 其 他 组 件 ， 使 之 形成 表单 。 当 触发 <form/>submit 方 法 时 ，<form/> 
能 将 组 件 内 用 户 输入 的 <switch/>、<input/>、<checkbox/>、<slider/>、 
<radio/>、<picker/> 数 据 按 组 件 name 属 性 进行 组 装 ， 作 为 参数 传递 给 
submit 方 法 。 通 过 这 种 方式 ， 我 们 可 以 利用 <form/> 很 方便 地 获取 表单 
数据 同 后 台 进 行 交互 。<form/> 有 以 下 属性 : 


report-submit: 是 否 返 回 formId，formId 用 于 发 送 模板 消息 ， 默 认 
值 为 false。 


:bindsubmit: 携带 form 中 的 数据 触发 的 submit 事 件 ， 与 <button/> 的 
form-type 属 性 配合 使 用 ，event.detail={value: {mname': "value'} ， 
formId: "}。 


'bindreset: 表单 重 置 时 触发 reset 事 件 ， 与 <button/> 的 form-type 属 性 
配合 使 用 。 


下 面 的 示例 构建 了 一 个 简单 的 表单 ， 点 击 提交 按钮 后 ， 控 制 台 会 
打印 出 用 户 输 入 项 ， 如 图 4-24 所 示 。 
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图 4-24 ” ”form 示例 


代码 如 下 : 


<form bindsubmit="submit" bindreset="reset"> 
<view class="section"> 
<view class="title">switch</view> 
<switch name="myswitch"/> 
</view> 


<view class="section"> 

<view class="title">input</view> 

<input name="myinput" placeholder=" 请 输入 内 容 " value="{{textvalue}}"/> 
</view> 


<view class="section"> 
<view class="title">checkbox</view> 
<checkbox-group name="mycheckbox"> 
<label><checkbox value="1"/> 中 国 </label> 
<label><checkbox value="2"/> 关 国 </label> 
<label><checkbox value="3"/> 日 本 </label> 
</checkbox-group> 
</view> 


<view class="section"> 
<view class="title">slider</view> 
<slider name="myslider" show-value/> 
</view> 


<view class="section"> 
<view class="title">radio</view> 
<radio-group name="myradio"> 
<label> 
<radio value="0"/> 男 
<radio value="1"/> 女 
</label> 
</radio-group> 
</view> 


<view class="section"> 
<view class="title">picker</view> 
<picker value="{{index}}" range="{{times}}" bindchange="changePicker"> 
<view> 
时 间 : {{times[index]}} 
</view> 
</picker> 
</view> 


<view class="section"> 
<button type="primary" form-type="submit"> 提 交 </button> 
<button form-type="reset"> 重 置 </button> 
</view> 
</form> 


.Section { font-size: 12px; padding : 10px; border-top : solid 1pXx #eee; } 
.Section input { border : solid 1px #ccc; border-radius: 4px; } 

.Section button { margin-bottom : 10px; } 

.Section label { margin-right : 20px; } 

.Section .title{ margin: 5px 0; } 


Page( { 
data : { 

times : [ 
120:00 1 ， 
120:30 ' ， 
'21:00', 
'21:30', 
"22:00 

]， 

index 3 


// 时 间 选 拌 啥 切换 时 ， 修 改 对 应 值 
changePicker : function( e ) { 
this.setData( { 
index : e.detail.value 


} ); 
}, 
// 点 击 提交 时 打印 当前 输入 数据 


submit : function( e ) { 
console.log( e.detail.value ); 


je 

// 

reset : function( e ) 
console.1og( ' 已 经 重 


{ 
置 对 象 ' ) 


} 
} ); 


4.5 导航 组 件 


<navigator> 是 小 程序 中 的 页 面 链接 ， 其 作用 和 HTML 中 超 链接 标 
签 一 样 ， 主 要 控制 页 面 的 跳 转 。 链 接 内 容 可 以 是 一 个 字 、 一 个 词 或 者 
一 组 词 ， 也 可 以 是 一 幅 图 ， 你 可 以 点 击 这 些 内 容 来 跳 转 到 新 的 页 面 ， 
<navigator/> 属 性 如 下 : 


-url: 应 用 内 跳 转 链接 。 链 接地 址 为 需要 跳 转 页 面 的 相对 地 址 。 


redirect: 跳 转行 为 是 否 为 重 定 同 ， 如 果 为 true， 则 跳 转 时 会 关闭 
当前 页 面 。 默 认 值 为 false 。 


-open-type: 可 选 值 'navigate'、'redirect'、'switchTab'， 对 应 于 
wx.navigateTo、wx.redirect-To、wx.switchTab 的 功能 ， 默 认 值 为 


navigate ° 


-hover-class: 点 击 时 的 样式 类 ， 当 hover-class="none" 时 ， 没 有 点 
击 效果 。 默 认 值 为 navigator-hover。navigator-hover 默 认为 {background- 
color: rgba (0，0，0，0.1) ; opacity: 0.7; }，<navigator/> 子 节点 青 
景色 应 为 透明 色 。 


页 面 间 跳 转 可 以 通过 url 进 行 参数 传递 ， 规 则 符合 URL 协 议 ， 新 页 
面 可 以 通过 注册 onLoad 方 法 获取 参数 ， 我 们 也 可 以 通过 redirect 和 url 的 


配合 实现 刷新 当前 页 面 ， 如 图 4-25 所 示 。 


navigator 页 面 代码 如 下 : 


<navigator url="../recevie/recevie?name=weixinapp&time=2016"> 
跳 转 到 其 他 页 面 

</navigator> 
<navigator url="../recevie/recevie?name=weixinapp" hover-class="myhover" 
redirect> 
重 定向 到 其 他 页 面 
</navigator> 
<navigator url="../navigator/navigator?name=weixinapp" hover-class="myhover" 
redirect> 

刷新 当前 页 面 
</navigator> 
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图 4-25 ”navigator 页 面 


我 们 在 recevie 页 面 通过 注册 onLoad 事 件 获取 传 入 的 参数 ， 如 图 4- 
26 所 示 。 
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图 4-26 receive 页面 


recevie 页 面 如 下 : 


<view> 
name:{{query.name}},age:{{query.time}} 
</view> 


Page( { 
data : { 
query : {} 


onLoad : function( query ) { 
/* 框架 已 将 参数 转化 为 onLoad 参 数 */ 


this.data.query = query 
this,.setData( this.data ); 


} 
} ); 


一 些 简 单 的 数据 可 以 通过 unl 进行 传 递 ， 但 一 些 较为 复 洒 的 数据 对 
象 束 需要 我 们 通过 染 构 实现 。 


4.6 ”媒体 组 件 


4.6.1] image 


一 个 应 用 中 图 片 是 必 不 可 少 的 ， 就 像 HTML 提 供 了 <img/> 标 签 一 
样 ， 小 程序 提供 了 <image/> 组 件 。 小 程序 中 的 <image/> 除 了 可 以 显示 图 
刻 外 ， 还 提供 了 图 片 的 裁 藤 、 缩 放 模 式 属 性 ， 这 大 大 丰富 了 <image/> 的 
显示 能 力 。<image/> 默 认 宽度 为 300px， 默 认 高 度 为 225px， 属 性 如 下 : 


src: 图 片 资源 地 址 。 可 以 是 网 络 地 址 ， 也 可 以 是 本 地 图 斤 的 相对 
地 址 。 


-mode: 图 片 的 裁 盘 、 缩 放 模式 。 稚 认 值 为 “scaleToFill”。 


:binderror 当 错 误 发 生 时 ， 发 布 到 App Service 的 事件 名 ， 事 件 对 


象 event.detail={errMSsg: 'something wrong'}。 


:bindload: 当 图 片 载 入 完毕 时 ， 发 布 到 App Service 的 事件 名 ， 事 件 
对 象 event.detail={height: ' 图 片 高 度 px'，width: ' 图 片 宽度 px'}。 


-mode 属 性 有 一 共有 13 种 裁剪 模式 ， 其 中 4 种 是 缩放 模式 ，9 种 是 裁 
邓 模 式 。 


缩放 模式 : 


:scaleToFill: 不 保持 纵横 比 缩放 图 片 ， 使 图 片 的 宽 高 完全 拉 伸 至 填 
满 image 元 素 。 


“aspectFit: 保持 纵横 比 缩放 图 片 ， 使 图 片 的 长 边 能 完全 显示 出 
也 束 是 说 ， 可 以 完整 地 将 图 片 显示 出 来 。 


术 


aspectFill: 你 持 纵 横 比 缩放 图 片 ， 只 保证 图 片 的 短 边 能 完全 显 不 
出 来 。 也 就 古 说 ， 图 片 通 泗 只 在 水 平 或 垂直 方向 是 完整 的 ， 男 一 个 方 
癌 将 会 发 生 截取 。 


-widthFix: 宽度 不 变 ， 高 度 目 动 变化 ， 保 持原 图 视 高 不 变 ， 这 时 图 
片 原 有 高 度 样 式 会 失效 。 


.裁剪 模式 : 

top: 不 缩放 图 片 ， 只 显示 图 片 的 顶部 区 域 。 
bottom: 不 缩放 图 片 ， 只 显示 图 片 的 底部 区 域 。 
center: 不 缩放 图 片 ， 只 显示 图 片 的 中 间 区 域 。 
“left: 不 缩放 图 片 ， 只 显示 图 片 的 左边 区 域 。 


Tight: 不 缩放 图 片 ， 只 显示 图 片 的 右边 区 域 。 


top left: 不 缩放 图 片 ， 只 显示 图 片 的 左上 边区 域 。 
top right， 不 缩放 图 片 ， 只 显示 图 片 的 右上 边区 域 。 
bottom left: 不 缩放 图 片 ， 只 显示 图 片 的 左下 边区 域 。 
bottom right: 不 缩放 图 片 ， 只 显示 图 片 的 右 下 边区 域 。 


图 4-27 使 用 一 张 原 图 大 小 为 720pxx450px 的 图 ， 和 大 小 为 
300pxx300px 的 image 组 件 为 大 家 展示 不 同 模式 下 的 显示 效果 。 


a) 原 图 


c)aspectFit 


by) scaleToFill 


e) idthFix 


d) aspectFill 


图 4-27 image 组 件 不 同 模式 的 效果 图 
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图 4-27 ”( 续 ) 


4.6.2 _ audio 


小 程序 运行 在 页 面 中 直接 租 入 的 音频 组 件 ， 官 方 系统 为 其 提供 了 
一 套 默 认 的 组 件 样式 ， 我 们 也 可 以 通过 修改 属性 或 调用 API 封 装 自己 
的 音频 UI 组 件 ，<audio/> 属 性 如 下 : 


src: 要 播放 音频 的 货源 地 址 。 可 以 是 网 络 音频 地 址 或 本 地 音频 文 
件 相对 路 径 。 


loop: 有 是否 循环 播放 ， 默 认 值 为 false。 
controls: 是 否 显 示 默 认 探 件 ， 黑 认 值 为 tue 。 


.poster: 默认 控件 上 的 音频 封面 的 图 片 资 源 地 址 ， 如 果 controls 属 
性 值 为 false 则 poster 无 效 。 


-name: 默认 控件 上 的 音频 名 字 ， 如 果 controls 属 性 值 为 false 则 
name 无 效 。 鸭 认 值 为 未 知音 频 ?。 


author， 默 认 控件 上 的 作者 名 字 ， 如 果 controls 属 性 值 为 false 则 
author 无 效 。 默 认 值 为 "未知 作者 ”。 


'binderror: 当 发 生 错误 时 触发 error 事 件 ，detail={errMsg: 
MediaError.code}。MediaError.code 有 以 下 类 型 . 


.MEDIA_ERR_ABORTED: 获取 资源 被 用 户 禁 止 。 
:MEDIA_ERR_NETWORD: 网 络 错误 。 
:MEDIA_ERR_DECODE: 解码 错误 。 
.MEDIA_ERR_SRC_NOT_SUPPOERTED: 不 合适 资源 。 
:bindplay: 当 开 始 /继续 播放 时 触发 play 事 件 。 

:bindpause: 当 和 暂停 播放 时 触发 pause 事 件 。 


:bindtimeupdate: 当 播 放 进 度 改变 时 触发 timeupdate 事 件 ，detail= 


{currentTime, duration} ° 


:bindended: 当 播 放 到 末尾 时 触发 ended 事 件 。 


默认 的 <audio/> 样 式 束 是 我 们 在 微 信 朋 友 圈 中 常见 的 样式 ， 如 图 4- 
28 所 示 。<audio/> 播 放 等 功能 需要 配合 API 实 现 ， 具 体 可 参考 API 音 乐 
播放 章 订 。 
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图 4-28 ”系统 默认 控件 


代码 如 下 : 


<audio poster="{{myaudio.poster}}" src="{{myaudio.src}}" 
name="{{myaudio.name}}" author="{{myaudio.author}}" 
controls loop action="{{myaudio.action}}"> 


</audio> 
Page( { 
data : { 
myaudio : { 
src : './resource/qilixiang.mp3', 
poster : 
'http://www.yoka.com/dna/pics/ba1ic1117/42/d3551ecici7cadcddc1.jpg', 
name : ' 七 里 香 '， 
author : ' 周 杰 伦 ' 
} 
} 


4.6.3 video 


小 程序 中 允许 我 们 简单 租 入 视频 ， 和 audio 组 件 相 比 ， 它 能 提供 的 
属性 少 了 很 多 ， 只 能 设置 视频 源 ， 监 听 加 载 错误 ， 这 样 儿 乎 不 能 对 
video 组 件 做 什么 操作 。<video/> 默 认 宽 度 为 300px， 高 度 为 225px， 属 
性 如 下 : 


src: 要 播放 视频 的 资源 地 址 。 


controls: 是 否 显 示 默 认 播 放 控件 (播放 /暂停 按钮 、 播 放 进 度 、 
时 间 ) ， 默 认为 tue。 


-danmu-list: 弹 幕 列表 。 


.danmu-btn: 是 否 显示 弹 幕 按钮 ， 只 在 初始 化 时 有 效 ， 不 能 动态 
变更 ， 默 认为 false。 


enable-danmu: 有 是否 展 示 弹 幕 ， 只 在 初始 化 时 有 效 ， 不 能 动态 变 
更 ， 默 认为 false。 


autoplay: 是 否 目 动 播放 ， 默 认为 false 。 


bindplay: 当 开 始 /继续 播放 时 触发 play 事 件 。 


:bindpuase: 当 和 暂停 播放 时 触发 pause 事 件 。 
:bindended: 当 播 放 到 末尾 时 触发 ended 事 件 。 


"bindtimeupdate: 播放 进度 变化 时 触发 ，event.detail= 
{currentTime: ' 当 前 播放 时 间 '}。 触 发 频率 应 该 在 250ms 一 次 。 


:objectFit 当 视 频 大 小 与 video 容 需 大 小 不 一 臻 时， 视频 的 表现 形 
式 。contain: 包含 ， 和 1]: 填充 ，cover: 履 盖 ， 默 认 值 为 contain 。 


vicle 示 例如 图 4-29 的 所 示 。 
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图 4-29 ”video 示 例 


代码 如 下 : 


<view class="video"> 
<video id="myVideo" src="{{src}}" danmu-list="{{danmu}}" enable-danmu 
controls></video> 
<view class="action"> 
<button bindtap="getVideo"> 获 取 视 频 </button> 
<view class="danmu"> 
<input type="text" value="{{danmuText}}" bindblur="setInputValue"/> 
<button bindtap="sendDanmu"> 发 送 弹 幕 </button> 
</view> 
</view> 
</view> 


,Video Video { width : 100%;height : 562.5rpx; } 

,Video .action { padding : 20rpx; } 

,Video .action .danmu { margin-top: 10px; position: relative; padding-right 
210rpx; height : 80rpx; } 

,Video .action .danmu input { border : solid 1px #ccc; height : 80rpx; padding 
© 1i0rpx; border-radius: 3px;} 

,Video .action .danmu button { width : 200rpx; position: absolute; right : 0; 
bottom : 0; height : 80rpx; } 


Page( { 
data : 
src : 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload? 
filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e002040 
12882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff 
02024ef202031e8d7f02030f42400204045a320a0201000400 ' ， 
// 设 置 弹 幕 
danmu : [{ 
text : ' 第 1s 出 现 的 弹 幕 '， 
color : '#ff0000°', 
time : 1 


{ 
text : ' 第 2s 出 现 的 弹 幕 '， 
color : '#00ff00"', 
time : 2 
} 
]， 
danmuText 
}, 
onReady : function() { 
// 获 取 videon 上 下 文 videoContext 对 象 
this.videoContext = wx.createVideoContext( 'myVideo' ); 


}, 


1 1 


}, 
getVideo : function() { 
Var self = this,; 
// 从 本 地 或 相机 选择 视频 
wx.chooseVideo( { 
success : function( res ) { 
self,.,setData( { 
maxDuration : 60, 
src : res.tempFilePath 


} ); 
} 
} ); 
到 
SetInputValue : function( e ) { 
// 同步 数据 
this.setData( { 
danmuText : e.detail.value 


a 
// 发 送 弹 莫 


sendDanmu : function() { 
var danmuText = this.data.danmuText; 
console.log( this.videoContext ); 
this.videoContext.sendDanmu( { 
text : danmuText, 
color : “"#ff0000 


} ); 

// 发 送 弹 幕 后 清空 输入 

this.setData( { 
danmuText : "! 


} ); 


IEH[ 


需要 注意 的 是 <video/> 组 件 不 能 在 <scroll-view/> 中 使 用 。 


4.7 地 图 组 件 


移动 应 用 中 地 图 是 必 不 可 号 的 内 容 ， 通 过 地 图 我 们 可 以 很 直观 地 
表现 出 地 理 信息 ， 为 此 小 程序 提供 了 <map/> 组 件 和 定位 相关 的 API。 本 
小 太 主 要 讲解 <map/> 组 件 ， 它 主要 人 负 贡 展示 性 的 功能 ， 地 理 位 置 的 获 
取 将 在 后 续 API 中 讲解 。 由 于 需要 适 配 三 端 ， 在 小 程序 中 我 们 不 能 使 用 
<map/> 组 件 以 外 的 地 图 插件 ， 如 高 德 地 图 、 百 度 地 图 ， 经 过 几 次 发 版 
后 ， 目 前 小 程度 地 图 组 件 正 能 满足 大 部 分 需求 。 


小 程序 中 的 <map/> 组 件 主 要 负责 地 理 位 置信 息 的 简单 展示 ， 它 没 
有 百度 地 图 、 高 德 地 图 那样 丰富 的 API， 目 前 地 图 具备 绘制 图 标 、 路 
线 、 半 径 等 能 力 ， 在 <scroll-vitw/> 中 不 能 使 用 <map/> 组 件 ， 组 件 属性 如 
下 : 


-latitude: 中 心 纬度 。 
:longitude: 中 心经 度 。 


scale: 缩放 级 别 ， 默 认为 16。 


-markers: 标记 点 ， 用 于 在 地 图 上 显示 标记 的 位 置 ， 不 能 目 定义 图 
标 和 样式 ， 每 个 标记 点 属性 如 下 : 


id， 标记 点 id，marker 点 击 事件 回调 会 返回 此 id 。 
-atitude: 纬度 ， 浮 点 数 ， 苑 围 -90~90， 必 填 项 。 
longitude: 经 度 ， 浮 点 数 ， 范 围 -180~180， 必 填 项 。 


:title: 标注 点 名 中 


iconPath， 显 示 的 图 标 ， 项 目 目录 下 的 图 片 路 径 ， 支 持 相 对 路 径 写 
法 ， 必 填 项 。 


rotate: 旋转 角度 ， 顺 时 针 旋 转 的 角度 ， 范 围 0~360， 默 认为 0. 


alpha: 标注 的 透明 度 ， 默 认 1， 无 透明 。 


width， 标 注 图 标 宽度 ， 默 认为 图 片 实际 宽度 。 


-height:， 标注 图 标高 度 ， 默 认为 图 片 实 际 高 度 。 


:polyline: 路 线 ， 指 定 一 系列 坐标 点 ， 从 数组 第 一 项 连 线 至 最 后 一 
项 ， 数 组 元 素 属 性 如 下 : 


:points: 经 纬度 数组 ， 如 : [{latitude: 0，longitude: 0}]， 必 填 
项 。 


color: 线 的 颜色 ，8 位 十 六 进 制 表示 ， 后 两 位 表示 alpha 值 ， 如 : 
#000000AA 。 


-width: 线 的 宽度 。 


.dottedLine: 是 否 为 虚线 ， 默 认为 false。 


:circles: 圆 ， 数 组 类 型 ， 在 地 图 上 显示 圆 ， 数 组 元 素 属性 如 下 : 
-latitude: 纬度 ， 浮 点 数 ， 范 围 -90~90， 必 填 项 。 


Jongitude: 经 度 ， 浮 点 数 ， 范 围 -180~180 必 填 项 。 


:color: 描 边 的 颜色 ，8 位 十 六 进 制 表示 ， 后 两 位 表示 alpha 值 ， 
如 : #000000AA。 


fillColor: 填充 颜色 ，8 位 十 六 进 制 表示 ， 后 两 位 表示 alpha 值 ， 
如 : #000000AA 。 


:radius: 半径 ， 必 填 项 。 

strokeWidth: 摘 边 的 宽度 。 

.Controls: 控件 。 

id: 控件 id， 在 控件 点 击 事件 回调 会 返回 此 id 。 


:position: 控件 在 地 图 的 位 置 ， 控 件 相 对 地 图 位 置 ， 必 填 项 ， 
position 元 素 属 性 如 下 : 


left: 距离 地 图 的 左边 界 多 远 ， 默 认为 0。 
:top: 距离 地 图 的 上 边界 多 远 ， 默 认为 0。 
.width: 控件 宽度 ， 默 认为 图 片 宽 度 。 


Peight: 控件 高 度 ， 默 认为 图 片 高 度 。 


-iconPath: 显示 的 图 标 ， 相 对 应 用 根 目 录 路 径 的 图 片 ， 必 填 项 。 
clickable: 是 否 可 点 击 ， 默 认 不 可 点 击 。 


include-points: 缩放 视野 以 包含 所 有 给 定 的 坐标 后 。 


.Show-location: 显示 党 有 方向 的 当前 定位 点 。 
:bindmarkertap: 点 击 标 记 点 时 触发 。 
:bindcontroltap: 点 击 控件 时 触发 。 
:bindregionchange: 视野 发 生变 化 时 触发 。 
:bindtap: 点 击 地 图 时 触发 。 


在 下 面 示例 中 ， 我 们 使 用 两 个 marker 标 记 起 始 位 置 和 结束 位 置 ， 用 
polyline 绘 制 路 线 ， 然 后 通过 controls 创 建 了 一 个 按钮 ， 如 图 4-30 所 示 。 
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图 4-30 ”地 图 示例 


代码 如 下 : 


<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" circles=" 
{{circles}}" scale="14" control="{{controls}}" bindcontroltap= "controltap" 
markers="{{markers}}" bindmarkertap="markertap" polyline= "{{polyline}}" 
bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"> 
</map> 


Page({ 
data: { 
latitude: 30.5491861989, 
longitude: 104.0680165911, 
scale : 5, 
// 设置 标记 点 
markers: [ 
{iconPath: "./images/flag.png",id: 0,1atitude: 30.5491861989, 
longitude: 104.0680165911,width: 30,height: 30}, 
{iconPpath: "./images/flag.png",id: 1,1atitude: 30.5468832218, 
longitude: 104.0568588833,width: 30,height: 30} 


]， 
// 设置 路 线 
polyline: [{ 
// 按 顺 序 贡 置 5 个 点 
points: [ 
{longitude: 104.0680165911, Latitude: 30.5491861989}, 
{longitude: 104.0687752749, Latitude: 30.5493485980}, 
{longitude: 104.0688698344, Latitude: 30.5470634483}, 
{longitude: 104.0568588833, Latitude: 30.5468832218} 


]， 
color: "#0000ffDD", 


width: 2, 
dottedLine: true 
}], 


// 设置 2 个 图 标 
controls: [{ 
id: 1,iconpath: './images/location.png', 
position: {left: 0,top: 250,width: 30,height: 30}, 
clickable: true 


}] 
汪 地 图 发 生变 化 时 触发 


regionchange(e) { 
// type 可 以 区 分 十 开始 拖 动 还 是 结束 拖 动 
console.1og(e.type) 


】 
// 标记 点 点 击 时 触发 
markertap(e) { 
// 根据 标记 点 markerId 区 分 
console.log(e.markerId) 


}, 
// 点 击 controls 设 置 的 图 标 
controltap(e) { 
// 通过 markerId 区 分 按 各 
console.log(e.controlId) 
} 
}) 


Ed 


4.8 画布 组 件 


<canvas/> 主 要 用 于 绘制 图 形 ， 在 页 面 上 放置 一 个 <canvas/>， 就 相 
当 于 在 页 面 放置 了 一 块 “画布 *， 可 以 在 其 中 进行 图 形 绘制 。<canvas/> 
组 件 是 一 块 无 色 透 明 区 域 ， 本 身 并 没有 绘制 能 力 ， 它 仅仅 是 图 形容 
器 ， 需 要 调用 相关 API 来 完成 实际 的 绘图 任务 ， 本 章 主要 讲解 <canvas/> 
组 件 ， 相 关 API 在 后 续 章节 中 讲解 。 


<canvas/> 组 件 默认 宽度 300px， 高 度 225px， 同 一 页 面 中 的 canvas- 
id 不 能 重复 ， 如 宁 使 用 一 个 已 经 出 现 过 的 canvas-id， 该 <canvas/> 组 件 对 
应 的 画布 将 被 隐藏 并 不 再 正常 工作 ， 需 要 注意 的 是 请 勿 在 <scroll- 
view/> 中 使 用 <canvas/>。 其 属性 如 下 : 


:canvas-id: canvas 组 件 的 唯一 标识 符 。 


disable-scroll: 当 在 canvas 中 移动 时 ， 禁 止 屏 幕 滚动 以 及 下 拉 刷 
新 ， 默 认为 false。 


:bindtouchstart 手指 触摸 动作 开始 。 


:bindtouchmove: 手指 触摸 后 移动 。 


:bindtouchend: 手指 触摸 动作 结 


bindtouchcancel: 手指 触摸 动作 被 打 断 ， 如 来 电 提醒 、 弹 窗 。 


bindlongtaop: 手指 长 按 500ms 之 后 触发 ， 触 发 了 长 按 事 件 后 进行 
移动 不 会 触发 屏幕 的 滚动 。 


'binderror: 当 发 生 错 误 时 触发 error 事 件 ，detail= 


{errMsg: "Something wrong'} ° 


canvas 组 件 本 吴 没 有 太 多 展示 的 点 ， 这 里 我 们 催 单 结合 API 为 大 家 
初步 演示 canvas 绘 图 能 力 ， 具 体 绘图 API 参 考 后 面 章 站 ， 示 例如 岁 4-31 
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图 4-31 ” canvas 示例 


代码 如 下 : 


<canvas canvas-id="myCanvas" style="width : 100%;height : 300px;"></canvas> 


Page( { 
onReady : function() { 
// 获取 绘图 上 下 文 
Var context = wx.createContext(); 


context .setStrokeStyle( "#0090ff" ); // 设置 线条 样式 


context .SetLinewidth( 5 ); // 


设置 线条 过 居 


LUI 


context .rect(3，2，150，200); // 添加 一 个 和 
mar a ht 
边 


context.stroke(); // 对 当前 路 径 


全 


// 绘制 图 像 
wx.drawCanvas( { 
canvasId : 'myCanvas', 


} ); 


console.log( 'asdf' ); 


actions : context.getActions() 


4.9 客服 会 话 


<contact-button/> 用 于 在 页 面 上 显示 一 个 客服 会 话 按钮 ， 用 户 点 击 
后 会 进入 客服 会 话 ， 客 服 会 话机 制 需要 后 台 系 统 配合 ，<contact- 
button/> 仅 仅 作 为 一 个 展示 组 件 ， 目 前 <contact-button/> 能 力 有 限 ， 仅 能 
设置 大 小 和 图 标 颜 色 ， 其 属性 如 下 : 


.Size: 会 话 按钮 大 小 ， 有 效 值 为 18 一 27， 单 位 px， 默 认 值 为 18。 


-type: 会 话 按 钮 的 样式 类 型 ， 有 将 值 为 default-dark、default-light， 
默认 值 为 default-dark。 


“session-from: 用 户 从 按钮 进入 会 话 时 ， 开 发 者 将 收 到 带 上 本 参数 
的 事件 推送 。 本 参数 可 用 于 区 分 用 户 进 入 客服 会 话 的 来 源 。 


<contact-button/> 使 用 非常 简单 ， 示 例如 图 4-32 所 示 。 在 WXML 中 
写 入 标签 即 可 唤醒 会 话 ， 而 客服 会 话 中 的 功能 则 需要 后 台 对 接 ， 上 有 具体 
参考 5.8.5 节 “客服 消息 ”。 


下 午 2:25 
书籍 编写 demo 
客服 富 语 


图 4-32 ”客服 会 话 


代码 如 下 : 


<contact-button session-from="yoursession" style="margin : 100rpx;"> 
</contact-button> 


4.10 “人 小结 


本 章 对 小 程序 组 件 进 行 了 相应 的 介绍 ， 这 些 组 件 能 满足 大 部 分 开 
发 需求 ， 在 学 习 过 程 中 ， 大 家 需要 掌握 每 个 组 件 的 特性 ， 在 项 目 中 灵 
活 应 用 ， 一 些 如 媒体 、 地 图 、 画 布 等 组 件 的 个 别 功 能 需要 配合 API 使 
用 ， 相 关 API 将 在 接 下 来 的 草 世 中 进行 介绍 。 


第 5 章 API 


上 一 章 为 大 家 介绍 了 小 程序 组 件 的 使 用 ， 运 用 这 些 组 件 我 们 可 以 
完成 很 多 我 们 需要 的 UI 界面 ， 但 小 程序 的 一 些 功能 束 要 依赖 框架 提供 
的 API 来 完成 。 本 章 主要 讲解 小 程序 提供 的 API， 包 括 网 络 、 媒 体 、 文 
件 、 数 据 缓 存 、 位 置 、 设 备 、 界 面 、 开 放 接 口 8 大 类 ， 这 些 API 由 微 信 
本 身 提 供 ， 通 过 人 逻辑 层 JS 代 码 进 行 调用 。 


在 学 习 小 程序 API 之 前 ， 先 介绍 小 程序 API 在 定义 和 使 用 上 的 一 些 
通用 规则 。 一 般 来 说 ， 微 信 API 按 命名 规则 可 分 为 两 种 : 


:以 wx.on 开 头 的 API， 如 : wx.onSockectOpen 、 
wx.onBackgroundAudioPlay () 、wx.on-Com-passChange () 等 ， 均 代 
表 监 听 某 个 事件 发 生 的 API 接 口 ， 这 类 接口 一 般 来 说 参数 均 为 一 个 
callback 回 调 函 数 ， 当 该 事件 触发 时 ， 会 回调 callback 函 数 。 


.其 他 不 以 wx.on 开 头 的 API， 如 : wx.request、wx.uploadFile、 
wx.chooseImage， 这 类 接口 如 果 没 有 特殊 约定 ， 通 常 都 接受 一 个 Object 
对 象 作 为 参数 ， 在 Object 中 可 以 指定 success、fail、complete 来 接收 接 
口 调用 结果 ， 这 三 个 回调 函数 在 有 些 API 中 具有 返回 值 ， 有 些 没有 。 


两 种 调用 方式 如 下 : 


// 以 wx.on 开 头 
WwWX,onSocketopen( function( res ) t 
console.1og( 'WebSocket 连 接 已 打 和 


} ); 
// 不 以 wx .on 开头 


WX. request ( { 
/* 接口 调用 成 功 */ 
success : eA) {}, 


/* 接口 调用 失败 * 
fail : runction() {}, | 
/* 接口 调用 结束 (调用 成 功 、 失 败 都 会 执行 ) */ 


complete : utct iont) {} 
} ); 


5.1 网 络 


每 个 微 信 小 程序 需要 事先 设置 一 个 通信 域名 ， 小 程序 可 以 跟 指 定 
的 域名 进行 网 络 通信 。 包 括 不 同 HTTPS 请 求 (wx.request) 、 
WebSocket 通 信 (wx.connectSocket) 、 上 传 文件 (wx.uploadFile) 和 
下 载 文 件 (wx.downloadFile) 。 设 置 通信 域名 需要 登录 小 程序 “后 台 -> 
设置 -> 开发 设置 ， ”在 服务 器 配置 中 添加 受信 任 的 域 。 


5.1.1 发 起 HTTPS 请 求 


wx.request (Object) 


request 用 于 发 起 HTTPS 请 求 ， 默 认 超 时 时 间 和 最 大 超时 时 间 都 是 
60 秒 。 在 小 程序 中 只 能 使 用 HTTPS 请 求 不 能 使 用 HTTP 请 求 ， 一 个 微 
信人 小 程序 ， 同 时 只 能 有 5 个 网 络 请 求 连接 。Object 参 数 属 性 如 下 : 


-url: 后 台 服 务 器 接口 地 址 ，url 不 能 有 端口 必 填 项 。 
.data: 请 求 的 参数 。 


:header: 设置 请 求 的 header，header 中 content-type 默 认 
为 'application/json'，header 中 不 能 设置 referer，referer 格 式 固 定 为 
https://servicewechat.com/{appid}/{version}/page-frame.html ， 其 中 
{appid} 为 小 程序 的 appid，{version} 为 小 程序 的 版 本 号 ， 版 本 号 为 0 表 
示 为 开发 版 


-method: HTTPS 请 求 方法 类 型 ， 默 认为 GET， 有 效 值 有 : 
OPTIONS ~、 GET ~、 HEAD ~ POST ~、 PUT 、~ DELFTE ~ TRACE、 
CONNECT，method 有 效 值 必须 为 大 写 。 


-dataType: 默认 为 json。 如 果 设 置 了 dataType 为 json， 则 会 尝试 对 
啊 应 的 数据 做 一 次 JSON.parse 。 


.Success: 收 到 服务 絮 成 功 返 回 的 回调 函数 ，res={data: ' 开 发 者 服 
务 器 返回 的 内 容 }。 


fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


data 数 据 最 终 发 送 给 服务 器 的 数据 是 String 类 型 ， 如 果 传 入 的 data 
不 是 String 类 型 ， 则 会 被 转化 成 String。 转 化 规则 如 下 : 


1) 对 于 header["content-type] 为 'application/json' 的 数据 ， 会 对 数据 
进行 JSON 序 列 化 。 


2) 对 于 header['content-type'] 为 'application/x-www-form- 
urlencoded' 的 数据 ， 会 将 数据 转换 成 query string 
(encodeURIComponent (k) =encodeURIComponent (v) 


&xencodeURIComponent (k) =encodeURIComponent (v) ...) 
示例 代码 如 下 : 


wx.request( { 
Url : 'https://www.dmall.com', 
header: { 


"Content -Type': 'application/json' 
} 
Success : function( e ) { 
console.log( e ); 
} 
complete : function() { 
console.10g( “无 论 成 功 失败 都 会 执行 ' ); 


} 
} ); 


对 于 request 方 法 有 以 下 注意 项 : 
:开发 者 工具 0.10.102800 版 本 ，header 的 content-type 设 置 异 常 。 


.客户 端的 HTTPS TLS 版 本 为 1.2， 但 Android 的 部 分 机 型 还 未 支持 
TLS 1.2， 所 以 请 确保 HTTPS 服 务 絮 的 TLS 版 本 支持 1.2 及 以 下 版 本 。 


5.1.2 ” 上传、 下载 


1.wx.uploadFile (Object) 


上 中 提 到 的 request 仅 用 于 与 服务 端 进行 简单 通信 ， 如 需 提 交 帝 
有 本 地 资源 的 数据 ， 便 需要 调用 此 接口 将 本 地 资源 上 传 到 指定 服务 
磊 。 调 用 这 个 uploadFile 时 ， 窜 户 端 会 回 服 务 端 发 起 一 个 HITP POST 请 
求 ，header 中 Content-Type 为 multipart/form-data。 上传 文件 最 大 并 发 限 
制 为 10 个 ， 默 认 超时 时 间 和 最 大 超时 时 间 都 是 60 秒 ，Object 参 数 属 性 
如 下 : 


-url: 开发 者 服务 器 url， 必 填 项 。 
-filePath: 要 上 传 文件 资源 的 路 径 ， 必 填 项 。 


name: 文件 对 应 的 key， 开 发 者 在 服务 端 通过 这 个 key 可 以 获取 到 
文件 的 二 进 制 内 容 ， 必 填 项 。 


header: 设置 请 求 的 header，header 中 不 能 设置 referer，referer 格 
式 固 定 为 https://servicewechat.com/{appid}/{version}/page-frame.html ， 
其 中 {appid} 为 4 \ 程 序 的 appid ，{version} 为 \ 程 序 的 版 本 号 ， 版 本 号 为 
0 表示 为 开发 版 。 


:formData: HTTP 请求 中 其 他 额外 的 请 求 数据 。 


.Success: 收 到 服务 需 成 功 返 回 的 回调 函数 ，success 返 回 参数 属性 
如 下 : 


-data: 开发 者 服务 器 返回 的 数据 。 
:statusCode: HTTP 状 态 码 。 
:fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


行 ) 。 


示例 代码 如 下 : 


wx.chooseImage({ // 调用 选中 图 片 接 
success : function( res ) { 
var tempFilePaths = res.tempFilePaths; // 获取 临时 图 片 地 址 
wx.uploadFile( { 
Url : 'http://www.myserver.com', 
filtPpath : tempFilePpaths[0], 
name : 'myFile', 
formData : { // 其 他 数据 
"otherData' : "Value' 


了 
success : function( response ) { 
var data = response.data; // 服务 器 返回 数据 


} 

} ); 
} 
}); 


2.wx.downloadFile (Object) 


从 服务 端 下 载 资 源 到 本 地 。 调 用 API 后 ， 客 户 端 直 接 发 起 一 个 
HTTP GET 请 求 ， 把 文件 下 载 到 本 地 并 返回 文件 的 本 地 临时 路 径 ， 临 
时 文件 在 小 程序 本 次 启动 期 间 可 以 正常 使 用 ， 如 需 持久 保存 ， 需 要 主 
动 调用 wx.saveFile 进 行 保存 。 下 载 文 件 文件 最 大 并 发 限制 为 10 个 ， 默 
认 超 时 时 间 和 最 大 超时 时 间 都 是 60s，Object 参 数 属性 如 下 : 


-url: 下 载 资 源 的 URL， 必 填 项 。 


:header: 设置 请 求 的 header，header 中 不 能 设置 referer，referer 格 
式 固 定 为 https://servicewechat.com/{appid}/{version}/page-frame.html ， 
其 中 {appid} 为 小 程序 的 appid ， {version} 为 小 程序 的 版 本 号 ， 版 本 号 为 
0 表示 为 开发 版 。 


Success: 收 到 服务 亏 成 功 返 回 的 回调 函数 ，res= 
{tempFilePath: 文件 临时 路 径 '} 。 文 件 临 时 路 径 在 小 程序 局 动 期 间 可 
以 正 币 使 用 ， 如 需 持 久保 存 ， 需 要 主动 调用 wx.saveFile 方 法 ， 这 样 才 
能 保证 小 程序 下 次 局 动 时 也 能 访问 。 


fail: 接口 调用 失败 的 回调 函数 。 


:complete: 接口 调用 结束 的 回调 画 数 (调用 成 功 、 失 败 都 会 执 
行 ) 。 


示例 代码 如 下 : 


wx.downl 
Url : 


sucess : CE 
etImageInfo( { // 下 载 图 片 资源 后 读 取 其 信息 。 


wx.g 
sr 
su 


} 
} ); 


} 
} ); 


oadFile( { 


'http://www.myserver.com'，// 接口 地 址 


function( res ) { 


寅 


c : res.tempFIlePaths[0]， 
ccess : function( info ) { 
console.log( info.width + ', 


' + info.height ); 


5.1.3 WebSocket 


上 市 中 介绍 的 网 络 通 信 方 法 者 十 通过 客户 端 主动 同 服务 端 发 起 请 
求 ， 由 服务 端 啊 应 返回 数据 来 达到 通信 的 目的 ， 这 种 方式 有 个 缺点 ， 
不 能 实现 服务 端 主动 癌 客 户 端 推送 消 轧 。 采 用 这 种 短 连 接 方 式 实现 客 
户 山 和 服务 端 之 间 的 即时 通信 技术 只 能 使 用 轮 询 ， 即 在 特定 时 间 间 隔 
(如 每 1 秒 ) ， 由 客户 端 向 服务 端 发 起 请 求 ， 然 后 由 服务 端 返 回 最 新 的 
数据 。 这 种 方式 需要 客户 端 要 不 断 的 同 服 务 端 发 出 请 求 ， 在 处 理 即 时 
通信 有 时， 这 种 方式 既 浪费 性 能 义 占 市 贺 。 面 对 这 种 情况 ， 在 需要 即时 
通信 时 ， 我 们 可 以 利用 小 程序 提供 的 WebSocket 相 天 API 创 建 
WebSocket， 实 现 长 连接 达到 即时 通信 的 目的 。 长 连接 服务 端 比 短 连接 
更 耗资 源 ， 在 技术 选项 上 要 慎重 。 


1.wx.connectSocket (Object) 


创建 一 个 WebSocket 连 接 。 一 个 小 程序 同时 只 能 有 一 个 WebSocket 
连接 ， 创 建新 连接 时 ， 如 果 当 前 已 存在 一 个 WebSocket 连 接 ， 会 自动 天 
闭 该 连接 ， 并 重新 创建 一 个 新 的 WebSocket 连 接 ， 创 建 连接 时 默认 和 最 
大 超时 时 间 都 是 60 秒 。Object 参 数 如 下 : 


-url: 服务 器 接口 地 址 。 必 须 是 WSS 协 议 ， 且 域名 必须 是 后 台 配 置 
的 合法 域名 ， 必 填 项 。 


-data: 请 求 的 数据 。 
header: 参考 5.1.1 字 。 


.method: 请 求 方式 ， 默 认为 GET， 有 效 值 为 OPTIONS、GET、 


HEAD ~、POST、 PUT ~、 DELETE 、~ TRACE ~、 CONNECT., 韭 必 填 项 o 
.Success: 接口 调用 成 的 回调 函数 。 
.fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 、 失 败 都 会 执 
行 ) 。 


示例 代码 如 下 : 


wx.connectSocket( { 
Url : 'WsSS://www.myserver.com'，// 服务 端 需要 实现 socket 监 听 
data : { 
myData : 'data' 
}, 
header : 
'Content-Type' : 'application/json' // 可 以 不 设 


}, 
method : 'get' 
} ); 


2.Wx.onSocketOpen (callback) 
监听 WebSocket 连 接 打 开 事 件 。 


示例 代码 如 下 : 


后 全 
下 : 


wx.connectSocket( { // 创建 连接 
Url : 'wss://www.myserver.com', 


} ); 


wx.onSocketOopen( function( res ,) { 
console.1og( 'socket 连 接 已 打 


} ); 


3.wx.onSocketError (callback) 
监听 WebSocket 错 误 。 
示例 代码 如 下 : 


wx.connectSocket( { // 创建 连接 
Url : 'wss://www.myserver.com', 


} ); 


wx.onSocketOopen( function( res ,) t 
console.1og( 'socket 连 接 已 打 


} ); 1 


wx.onSocketError( function( res ) { 
console.1og( ' 连 接 打 败 。' )， 


} ); 


了 


4.wx.sendSocketMessage (callback) 


通过 WebSocket 连 接 发 送 数 据 ， 需 要 先 通过 wx.connectSocket 连 接 
， 并 在 wx.onSocketOpen 回 调 之 后 才能 发 送 。Object 参 数 属 性 如 


-data: 需要 发 送 的 内 容 ， 必 填 项 。 


.Success: 接口 调用 成 功 的 回调 函数 。 


-fail: 接口 调用 失败 的 回调 函数 。 


complete， 接 口 调用 结束 的 回调 画 数 (调用 成 功 、 失 败 都 会 执 
行 ) 。 
示例 代码 如 下 


Var socketOpen = false; 
var socketMsgQueue = []; 


wx.connectSocket( { // 创建 连接 
Url : 'wss://www.myserver.com', 


} ); 


wx.onSocketopen( function( res ) {// 监听 连接 扩 
socketOpen = true 
// 连接 打开 后 先 处 理 之 前 栈 中 的 数据 
for ( var i = 0, msg; msg = socketMsgQueue[i]; ++i ) { 
sendMsg( msg ); 


全 


socketMsgQueue =[]; 


} ); 


function sendMsg( msg ) { 
/ 如 果 连 接 在 请 求 中 还 未 打开 ， 先 将 数据 压 入 信息 栈 中 
If ( !socketopen ) { 
socketMsgQueue.push( msg ); 
return; 


// 如 果 连 接 EE: , 打 接 发 送 数 据 
WX. sendSocketMessagel { 
data : msg 


} ); 
} 


sendMsg( { myName : 'weixin' } ); 


5.wx.onSocketMessage (callback) 


监 昕 WebSocket 接 收 到 服务 絮 的 消息 事件 。callback 返 回 参 数 为 
data， 是 服务 絮 返 回 的 消 晨 。 


示例 代码 如 下 : 


wx.connectSocket( { 
Url : 'wss://www.myserver.com' 


} ); 


wx.onSocketMessage( function( res ) { 
console.1og( ' 收 到 服务 器 内 容 : ' + res.data ); 
} ); 


6.wx.closeSocket () 


天 | 闭 WebSocket 连 接 。 


示例 代码 如 下 : 


wx.closeSocket(); 


7.wx.onSocketClose (callback) 
监听 WebSocket 是 否 关 闭 。 当 WebSocket 成 功 天 闭 时 触发 。 


示例 代码 如 下 : 


wx.connectSocket( { 

Url : 'wss://www.myserver.com' 
} ); 
/A . . 

这 里 关闭 socket 必 须 在 成 功 打开 后 ， 时 _ 

如 果 由 于 网 络 或 时 效 问题 在 成 功 打开 前 调用 closeSocket， 那 么 就 做 不 到 关闭 WebSocket 目 的 。 
wx.onSocketOpen( function() { 
wx.closeSocket(); 


} ); 

wx.onSocketClose( function() { 
console.1og( ' 连 接 已 关闭 ' )， 
} ); 


5.2 ”媒体 


5.2.1 图 片 


1.wx.chooseImage (Object) 


从 本 地 相册 远 择 图 片 或 者 使 用 相机 拍照 。 担 照 时 产生 的 临时 路 
径 ， 在 小 程序 本 次 局 动 期 间 可 以 正常 使 用 ， 如 需 持 久保 存 ， 需 要 主动 
调用 wx.saveFile， 这 样 才能 保证 小 程序 下 次 局 动 时 能 访问 到 。Object 参 
数 属性 如 下 : 


count: 最 多 可 以 选择 的 图 片 张 数 ， 默 认为 9。 


sizeType: 图 片 尺 寸 类 型 ， 有 效 值 为 original ( 原 图 ) 、 
compressed (压缩 图 ) ， 默 认 二 者 都 有 。 


sourceType: 获取 图 片 的 方式 ， 有 效 值 为 album 《从 相册 选 图 ) 、 
camera (使 用 相机 ) ， 默 认 二 者 都 有 。 


.Success: 成 功 则 返回 图 片 的 本 地 文件 路 径 列 表 tempFilePaths ， 儿 
填 项 。 


fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


行 ) 。 
示例 代码 如 下 ， 


<view> 

<image src="{{src}}"></image> 

<button bindtap="chooseImage"> 选 择 图 片 </button> 
</view> 


chooseImage : function() { 
Var self = this,; 
wx.chooseImage( { 
count : 1, 
sizeType : ['original', 'compressed'], 
sourceType : ['album', 'camera'], 
success : function( res ) { 
console.log( res.tempFilePaths ); 
} 
} ); 
} 
} ); 


2.wx.previewImage (Object) 


预 史 图片 ， 调 用 后 小 程序 会 开局 图 片 浏 览 界面 ，Object 参 数 属性 
如 下 : 


:current: 当前 显示 图 片 的 链接 ， 链 接地 址 必须 是 urls 中 已 存在 的 
链接 ， 不 填 则 默认 为 urls 的 第 一 张 。 


-urls: 需要 预览 的 图 片 链接 列表 ， 必 填 项 。 


success: 接口 调用 成 功 的 回调 函数 。 


-fail: 接口 调用 失败 的 回调 函数 。 


:complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.previewImage( { 


a 夫 INZ7D 亚 示 币 


current : ‘http://www.uimaker .com/uploads/allimg/130301/1_130301090721 3.jpg', 
urls : [ 


'http://www.uimaker .com/uploads/allimg/130301/1_130301090720_2.jpg', 
'http://www.uimaker .com/uploads/allimg/130301/1_130301090721_3.jpg' 


3.wx.getImageInfo (Object) 
获取 图 片 信息 ，Object 属 性 如 下 : 


src: 图 片 的 路 径 ， 可 以 是 相对 路 径 、 临 时 文件 路 径 、 存 储 文件 路 
径 ， 网 络 图 片 路 人 径 。 


success: 接口 调用 接口 成 功 的 函数 ， 返 回 参数 如 下 : Width 为 图 
请 宽度 ，height 为 图 片 高 度 ， 单 位 均 为 px。 


-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


ChooseImage : function() { 
wx.chooseImage( { 
success : function( res ) { 
wx.getImageInfo( { 
src : res.tempFilePaths[0], 
success : function( info ) { 
console.log( info ); 


} 

} ); 
} 
} ); 


S52 


1.wx.startRecord (Object) 


开始 录音 。 当 主动 调用 wx.stopRecord， 或 者 录音 超过 1 分 钟 时 自动 
结束 录 首 ， 返 回 录 首 文 件 的 临时 文件 路 径 当 用 户 离开 小 程序 时 ， 此 接 
口 无 法 调用 。 孙 音 接 口 需要 用 户 授权 ， 业 务 代码 中 需要 考虑 用 户 拒绝 
授权 的 场景 。Object 参 数 属性 : 


.Success: 孙 音 成 功 后 调用 ， 返 回 孙 音 文件 的 临时 文件 路 径 ，res= 
{tempFilePath: “录音 文件 的 临时 路 径 '} 。 


fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.startRecord({ 
success: function(res) { 
var tempFilepPath = res. Es 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePath: tempFilePath 
) 


2.wx.stopRecord () 


主动 调用 集 止 录 首 。 


根据 上 例 代 码 ， 本 例 在 10 秒 钟 后 集 止 录 首 ， 示 例 代 码 如 下 : 


wx.startRecord({ 
success: function(res) { 
var tempFilePath = res,tempFIlePath 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePath: tempFilePpath 
}); 
} 
}); 


setTimeout( function() { 
wx.stopRecord( ); 
}, 10000 ); 


5.2.3 ”音频 播放 控制 


1.wx.playVoice (Object) 


开始 播放 语言 ， 同 时 只 人 允许 一 个 语音 文件 播放 ， 如 果 前 一 个 语音 
文件 还 没 播放 完 ， 将 中 断 前 一 个 语音 播放 。Object 参 数 属性 如 下 : 


-filePath: 需要 播放 的 语言 文件 路 径 ， 必 填 项 。 
.Success: 接口 调用 成 功 的 回调 函数 。 
:fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.startRecord(f{ 
success: function(res) { 
var tempFilepPath = res.tempFilepPath 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePath: tempFilePath 
* 


}) 


2.wx.pauseVoice () 


暂停 正在 播放 的 语音 。 再 次 调用 wx.playVoice 播 放 同一 个 文件 时 ， 
会 从 暂停 处 开始 播放 。 如 果 想 从 头 开始 播放 ， 需 要 先 调用 


WX.stopVoice ° 
根据 上 例 代码 ， 我 们 实现 5 秒 后 目 动 暂停 播放 ， 示 例 代码 如 下 : 


wx.startRecord({ 
success: function(res) { 
var tempFilePath = res.tempFilepath 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePath: tempFilePath 


SetTimeout( function() { 
wx.pauseVoice( ); 
}, 5000 ); 


}); 
3.wx.stopVoice () 
结束 播放 语音 。 
示例 代码 如 下 : 


wx.startRecord({ 
success: function(res) { 
var tempFilePath = res.tempFilepath 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePath: tempFilePath 


}); 

setTimeout( function() { 
wx.stopVoice( ); 

}, 5000 ); 


}); 


5.2.4 音乐 播放 控制 


1.wx.getBackgroundAudioPlayerState 《Object) 


获取 后 人 台 音 乐 播 放 状态 。 调 用 本 方法 时 可 以 获取 <audio/> 组 件 或 
wx.playBackgroundAudio () 方法 播放 的 音乐 。Object 参 数 属 性 如 下 : 


success: 接口 调用 成 功 的 回调 函数 ，success 返 回 参 数 属 性 如 下 : 


-duration: 音频 的 长 度 (单位 ，s) ， 只 有 在 当前 有 音乐 播放 
时 返回 。 
currentPosition: 音频 的 播放 位 置 (单位 ，s) ， 只 有 在 当前 


有 音乐 播放 时 返回 。 


“status: 播放 状态 (0: 暂停 中 ，1: 播放 中 ，2: 没有 音乐 在 播 
收 ) 


.downloadPercent: 音频 的 下 载 进度 (整数 ， 如 : 80 代 表 80%) ， 
只 有 在 当前 有 音乐 播放 时 返回 。 


-dataUrl: 歌曲 数据 链接 ， 只 有 在 当前 有 音乐 播放 时 返回 。 


fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


示例 代码 如 下 : 


wx.getBackgroundAudioPlayerState( { 
success : function( res ) { 

var statusText = { 

2 : ' 没 有 音乐 在 播放 '， 

1 ， ' 提 放 中 '， 

0 : 暂停 中 ' 


console.log( statusText[res.status] ); 


} 
} ); 


2.wx.playBackgroundAudio (Object) 


播放 音乐 ， 同 时 只 能 有 一 首 音 乐 正在 播放 。Object 参 数 属性 如 
下 ; 


-dataUrl: 音乐 链接 ， 必 填 项 。 

title: 音乐 标题 。 

coverImgUrl: 封面 URL 。 

success: 接口 调用 成 功 的 回调 函数 。 


-fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 


行 ) 。 
示例 代码 如 下 . 


wx.playBackgroundAudio( { 
dataUrl :; ' , /music/mymusic, mp3", 
title : ' 我 的 音乐 
coverImgUrl : ' /images/poster. jpg', 
success : function() { 
console.1og( ' 开 始 播 放 音乐 了 ' ) ; 


} ); 


3.wx.pauseBackgroundAudio () 
暂 集 播 放 首 乐 。 
示例 代码 如 下 : 


wx.playBackgroundAudio( { 
dataUrl :; ' , /music/mymusic, mp3", 
title : ' 我 的 音乐 
coverImgUrl : ' /images/poster. jpg', 
SUCCeSS : function() { 
console.1og( ' 开 始 播 放 音 乐 了 ' ) ; 


} ); 


setTimeout( function(){ 
console.1og( ' 暂 停 播 放 ' ) ; 
wx.pauseBackgroundAudio( ) ; 

}，60000 ); // 69 秒 后 自动 暂停 


4.wx.seekBackgroundAudio (Object) 


控制 音乐 播放 进度 ， 利 用 这 个 API 可 以 实现 音乐 的 快 进 
播放 位 置 拖 动 功能 ，Object 属 性 如 下 : 


:position: 音乐 位 置 ， 单 位 : 秒 。 
success: 接口 调用 成 功 的 回调 函数 。 


fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


) 。 
示例 代码 如 下 : 


wx.getBackgroundAudioPlayerState( { 
success : function( res ) { 
var currentPosition = res.currentPosition; 
wx.seekBackgroundAudio( 
postion : currentPosition + 30 


} ); 


5.wx.stopBackgroundAudio () 
停止 播放 音乐 
示例 代码 如 下 : 


wx.playBackgroundAudio( { 


dataUrl :; ' ,/mUsic/mymusic. mp3 '， 
title : ' 我 的 音乐 ' 
coverImgUrl ; |! ./images/poster. jpg', 


success : 人 
console.1og( “开始 播放 音乐 了 ) ; 


} 

} ); 

setTimeout( function(){ 
console.1og( ' 停 止 播放 ' )， 


wx.stopBackgroundAudio( ); 
}，60000 ); // 69 秒 后 自动 停止 


6.wx.onBackgroundAudioPlay (callback) 
监听 音乐 播放 。 


示例 代码 如 下 : 


E 绑 定 


I 
Dh 


wx.onBackgroundAudioPlay( function() { // 事 伯 
console.1og( ' 音 乐 播放 ' )， 


} ); 


wx.playBackgroundAudio( { 
dataUrl] : './music/mymusic.mp3', 
title : ' 我 的 音乐 '， 
coverImgUrl : './images/poster.jpg', 
success : function() { 
console.1og( ' 开 始 播 放 音 乐 了 ' ) ; 


} 
} ); 


7.wx.onBackgroundAudioPause (callback) 


监听 音乐 暂停 。 


示例 代码 如 下 : 


WX ， onBackgroundAudiopause( function() { 
console.1og( ' 音 乐 暂停 ' ) ; 


} ); 


wx.playBackgroundAudio( { 
dataUrl : './music/mymusic.mp3', 
title : ' 我 的 音乐 '， 
coverImgUrl : './images/poster.jpg', 
success : Pt 
console.1og( ' 播放 音乐 了 ' )， 


} 
} ); 


8.wx.onBackgroundAudioStop (callback) 


监听 音乐 停止 。 


示例 代码 如 下 : 


WX. a Or function() { 


console.1og( ' 音 乐 停止 ' ) ; 
} ); 
wx.playBackgroundAudio( { 
dataUr] :; ' ,/mUusic/mymusic. mp3", 
title :; ' 我 的 音乐 '， 
coverImgUrl : './images/poster.jpg', 
SUCCeSS : ed 
console.1og( ， 播放 音乐 了 ' ) ; 


} 
} ); 


5.2.5 “音频 组 件 探 制 


wx.createAudioContext (audioId) 创建 并 返回 audio 上 下 文 
audioContext 对 象 ，audioContext 通 过 audioId 和 一 个 <audio/> 组 件 绑 定 ， 
通过 它 可 以 操作 对 应 的 <audio/> 组 件 。audioContext 对 象 方法 如 下 : 


setSrc: 设置 音频 地 址 。 

-play: 播放 。 

.pause: 暂停 。 

seek: 跳 转 到 指定 位 置 ， 单 位 为 s。 


利用 播放 相关 API 配 合 <audio/> 我 们 可 以 创建 目 定义 样式 播放 佑 ， 
示例 如 图 5-1 所 示 。 
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图 5-1 目 定 义 样式 播放 器 


示例 代码 如 下 : 


一 


<view class="custom-audio"> 
<audio id="myAudio" style="display:none;"></audio> 
<image class="poster" mode="widthFix" 

src="http://www.yoka.com/dna/pics/baic1117/42/d3551ecici7cadcddc1.jpg"></image> 
<view class="actions" bindtap="action"> 

data-type="play"> 播 放 </view> 


<view 
<view 
<view 
<view 


data-type="pause"> 
data-type="seek"> 曙 
data-type="reset"> 


暂停 </view> 
kt 到 30 秒 </view> 
本 到 开头 </view> 


</view> 
</view> 


,CUStom-audio { width : 500rpx border : solid 1px #ccc; border-bottom : 0; 
margin : 60rpx auto; } 

.CUStom-audio .poster { width : 80%; border-radius: 50%; margin: 10%; } 
.CUStom-audio ,actions view { height : 80rpx; line-height: 80rpx; text-align: 
center; border: solid 1px #ccc; border-width : 1px Opx; background: -webkit- 
gradient(linear, 0% 0%, QO% 100%,from(#fff), to(#eee)); margin-top: 10rpx; } 


Page( { 
onReady : function( e ) { 
this.audioContext = wx.createAudioContext( 'myAudio' ); 
this.audioContext.setSrc( 
'http://ws.stream.qqmusic.qq.com/MSO0001VfvsJ21xFqb .mp3? 
guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB 
7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74COA5CCFADD6471160 
CAF3E6A&fromtag=46' ); 
}, 
action : function( e ) 
var type = e.target.dataset.type, 
audioContext = this.audioContext,; 


switch ( type ) { 
// 播放 


case 'play' : 
audioContext .play(); 
break; 

// 暂停 

case ' pause， 
audioCcontext .pause() 
break 

// 跳 到 39 秒 处 

case 'seek' : 
audioContext.seek( 30 ); 
break; 

// 从 头 播放 

case 'reset' : 
audioContext.seek( 0 ); 
break; 


5.2.6 ”视频 
wx.chooseVideo 《Object) 拍摄 视频 或 从 手机 相册 中 选取 视频 ， 返 
回 视 频 的 临时 文件 路 径 。Object 参 数 属性 如 下 : 


.SourceType: 获取 视频 方式 ，album 从 相册 选中 视频 ，camera 使 用 
相机 拍摄 ， 默 认 值 为 : [album”, “camera"] 。 


:maxDuration: 拍摄 视频 最 长 招 摄 时 间 ， 单 位 秒 。 最 长 支持 60 秒 。 


-camera: 拍摄 适 配 的 方式 用 前 置 或 后 置 摄像 头 ， 黑 认为 前 后 都 


有 : [‘album’，‘camera’] 。 


“success: 接口 调用 成 功 ， 返 回 视 频 文 件 的 临时 文件 路 径 ， 返 回 参 
数 属性 如 下 : 


-tempFilePath: 选 定 视频 的 临时 文件 路 径 。 
-duration: 选 定 视频 的 时 间 长 度 。 

'size: 选 定 视频 的 数据 量 大 小 。 

-height: 选 定 视频 的 高 。 


-Width: 选 定 视频 的 高 。 


fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


) 。 


示例 代码 如 下 : 


wx.chooseVideo( { 
sourceType : [ 'album', 'camera' ], 
camera : [ 'front', 'back' ], 
success : function( res ) { 
console.log( res.tempFilePath ); 


} 
} ); 


5.2.7 ”视频 组 件 控制 


wx.createVideoContext (videold) 同 wx.createAudioContext 
(audioId) 一 样 ，wx.createVideoContext (videoId) 用 于 创建 并 返回 
video 上 下 文 videoContext 对 象 ，video-Context 对 象 方法 如 下 : 


play: 播放 。 

:pause: 暂停 。 

seek: 跳 转 到 指定 位 置 ， 单 位 s。 

sendDanmu: 发 送 弹 幕 ，danmu 包 含 两 个 属性 text，color 。 
示例 代码 如 下 : 


<video src=",./video/myvideo.mp4" id="myVideo"></video> 


<button bindtap="play"> 播 放 </button> 

<button bindtap="pause"> 和 暂停 </button> 
<button bindtap="restart"> 回 到 开头 </button> 
<button bindtap="sendDanmu"> 发 送 弹 幕 </button> 


Page( { 
onReady : function() { 
this.videoContext = wx.createVideoContext( 'myVideo' ); 


play : function() { 
this.videoContext.play(); 


pause : function() { 
this.videoContext .pause( ); 


了 
restart : function() { 
this.videoContext.seek( 0 ); 


}, 
sendDanmu : function() 
this.videoContext.sendDanmu( { 


text : ' 弹 基文 案 '， 
color :  "'#ff0000 


} ); 
} 
} ); 


5.3 ”文件 


从 网 络 下 载 、 拍 照 、 录 音 、 录 视频 时 ， 文 件 都 是 存在 临时 文件 
中 ， 需 要 永久 保存 这 些 文件 就 需要 我 们 主动 调用 API 进 行 保 存 ， 这 时 
小 程序 会 将 文件 保存 到 系统 指定 目录 ， 关 于 这 些 文件 操作 都 需要 调用 
相关 API 。 


1.wx.saveFile (Object) 


保存 文件 到 本 地 ， 本 地 文件 存储 大 小 限制 为 0MB“。 Object 参 数 属 
Te Fs 


-tempFilePath: 需要 你 存 文件 的 临时 路 径 ， 必 填 项 。 


success: 返回 文件 的 保存 路 径 ，res={fsavedFilePath: ' 文 件 的 保存 


-fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 
人 六 六 


示例 代码 如 下 : 


wx.startRecord({ 
success: function(res) { 
var tempFilePath = res.tempFilePath // 临时 文件 路 径 
wx.saveFile({ // 保存 临时 文件 
tempFilePath: tempFilepPath, 
success: function(res) { 
var savedFilePath = res.savedFilePath; // 永久 地 址 路 径 
console.1og( ' 录 音 文件 已 保存 到 : ' + savedFilepath ); 


} 
}) 
} 
}); 


Er 
en 


2.wx.getSavedFileList (Object) 

获取 本 地 已 保存 文件 列表 ，Obejct 参 数 属性 如 下 : 

success: 接口 调用 成 功 的 回调 函数 ，success 返 回 参数 属性 如 下 : 
-errMsg: 接口 调用 结果 。 

fileList: 文件 列表 ，fileList 项 目 属性 包括 : 

-filtpath: 文件 的 本 地 路 径 。 


:createTime: 文件 保存 的 时 间 ， 从 1970/01/0108: 00: 00 到 当前 时 
间 的 秒 数 。 


'Size: 文件 的 大 小 ， 单 位 B 。 
fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


示例 代码 如 下 : 


wx.getSavedFileList( { 
success : function( res ) { 
for ( var i = 0, file; file = res.fileList[i]; ++i ) { 
console.1og( ' 第 ' + i + ' 个 文件 路 径 : ' + file,filePath ); 


3.wx.getSavedFileInfo (Object) 

获取 本 地 文件 的 文件 信息 ，Object 属 性 如 下 : 

filePath: 文件 路 径 ， 必 填 项 。 

Success: 接口 调用 成 功 的 回调 函数 ，success 返 回 参 数 属性 如 下 : 
-errMsg: 接口 调用 结果 。 

size: 文件 大 小 ， 单 位 B。 


:createTime: 文件 保存 时 的 时 间 惟 ， 从 1970/01/0108: 00: 00 到 当 
前 时 间 的 秒 数 。 


-fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.getSavedFileList( { 
success : function( res ) 
for ( var i = 0, file; file = res.fileList[i]; ++i ) { 
wx.getSavedFileInfo( { 
filePath : file.filePath， 
success : function( res ) { 
console.1og( ' 文 件 大 小 为 : ' + res.size ); 


} 
} ); 
} 


4.wx.removeSavedFile (Object) 

删除 本 地 存储 的 文件 ，Obejct 参 数 属性 如 下 : 

-filePath: 需要 删除 的 文件 路 径 ， 必 填 项 。 

:success: 接口 调用 成 功 的 回调 函数 。 

fail: 接口 调用 失败 的 回调 函数 。 

:complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
人 

示例 代码 如 下 : 


wx.getSavedFileList( { 
success : function( res ) { 

// 删除 所 有 文件 
for ( var i = 0, file; file = res.fileList[i]; ++i ) { 

wx.removeSavedFile( 

filePath : file.filePath 

} ); 

} 


t 


5.wx.openDocument 《Object) 


在 产 页 面 中 打开 文档 ， 文 持 格式 有 : doc、docx、xls、Xxlsx、ppt、 
pptx、pdf、Object 参 数 属性 如 下 : 


:filePath: 文件 路 径 ， 可 通过 wx.downFile 获 得 ， 必 填 项 。 
success: 接口 调用 成 功 的 回调 函数 。 
:fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 
行 ) 。 


示例 代码 如 下 : 


wx.downloadFile( { 
Url : 'http://www.myserver.com/my.docx', 
success : function( res ) { 
var filePath = res.filePath ， 
// 下 载 文档 后 在 新 页 面 中 预览 
wx.openDocument( 
filePath : filePath 
} ); 


} 
} ); 


5.4 数据 缓存 


每 个 小 程序 都 可 以 有 目 己 的 本 地 缓存 ，local Storage 是 永久 存储 
的 ， 本 地 缓存 最 大 为 1OMB， 数 据 操 作 API 分 为 同步 和 异步 两 种 。 


5.4.1 ”你 存 数 据 


1.wx.setStorage (Object) 


数据 存在 本 地 缓存 指定 的 key 中 ， 会 履 凑 掉 原 来 该 key 对 应 的 内 


将 秋 
这 是 一 个 异步 接口 。Object 参 数 属性 如 下 : 


等 
区 


员 


key: 本 地 缓存 中 的 指定 的 key， 必 填 项 。 
-data: 需要 存储 的 内 容 ， 必 选项 ， 必 填 项 。 
success: 接口 调用 成 功 的 回调 函数 。 

fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.setStorage( { 
key : 'myKey', 
Value : 'myValue' 


2.wx.setStorageSync (KEY, DATA) 


将 数据 存在 本 地 缓存 指定 的 key 中 ， 会 履 兰 掉 原 来 该 key 对 应 的 内 
这 


的 
容 ， 这 是 一 个 同步 接口 。 参 数 说 明 : 


key: 本 地 缓存 中 指定 的 key。 
-data: 需要 存储 的 内 容 。 
示例 代码 如 下 : 


wx.setStorageSync( 'myKey', 'myValue' ); 


5.4.2 ”获取 数据 


1.wx.getStorage (Object) 


从 本 地 缓存 中 异步 获取 指定 key 对 应 的 内 容 ，Object 参 数 属性 如 
下 : 


key: 本 地 缓存 中 的 指定 的 key， 必 填 项 。 


success: 接口 调用 的 回调 函数 ，res={data: key 对 应 的 内 容 }， 必 
填 项 。 


fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.getStorage( { 
key : 'myKey', 
success : function( res ){ 
console.1og( res.data ); // 打印 出 myKey 对 应 的 内 容 


} 
} ); 


2.wx.getStorageSync (KEY) 


从 本 地 缓存 中 同步 获取 指定 key 的 对 应 内 容 ， 参 数 说 明 : 
key: 本 地 缓存 中 的 指定 的 key， 必 填 项 。 
示例 代码 如 下 : 


var value = wx.getSstorageSync( 'myKey' ); 
console.log( value ); 


5.4.3 ”获取 本 地 数据 信息 


1.wx.getStorageInfo (Object) 

异步 获取 当前 storage 的 相关 信息 ，Object 参 数 属 性 如 下 : 
success: 接口 调用 的 回调 函数 ， 返 回 参数 属性 如 下 : 
keys: 当前 storage 中 所 有 的 key 。 

-currentSize: 当前 占用 的 空间 大 小 ， 单 位 kb 。 

limitSize: 限制 的 空间 大 小 ， 单 位 kb。 

fail: 接口 调用 失败 的 回调 函数 。 


:complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
人 交 


示例 代码 如 下 : 


wx.getSstorageInfo( { 
success : function( res ) { 
var p; 
for ( pin res.keys ) { 
console.log( p + ':' + wx.getStorageSsync( p ) ); 
} 


2.wx.getStorageInfoSync () 
同步 获取 当前 storage 的 相关 信息 。 


示例 代码 如 下 : 


Var p, 
info = WwWX,getStorageInfoSync( ) ; 
for ( p in info.keys ) { 
console.log( p + ':' + wx.getStorageSsync( p ) ); 


5.4.4 删除 数据 


1.wx.removeStorage (Object) 

根据 key 值 异步 删除 本 地 数据 ，Object 参 数 属性 如 下 : 
key: 本 地 缓存 中 指定 的 key， 必 填 项 。 

Success: 接口 调用 的 回调 函数 ， 必 填 项 。 

-fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.removeStorage( { 
key : 'myKey', 
success : function( res ) { 
console.log( res.data ); 


} 
} ); 
2.wx.removeStorageSync (Key) 


根据 key 值 同步 删除 本 地 数据 。 


示例 代码 如 下 : 


wx.removeStorageSync( 'myKey' ); 


-一 -一 一 一 一 一 一 一 


5.4.5 ”清空 数据 
1.wx.clearStorage () 
清理 本 地 数据 缓存 。 


示例 代码 如 下 : 


wx.clearStorage( ); 
// 不 阻塞 下 面 代 码 
doSsomethirg(); 


2.wx.clearSotargeSync () 
同步 清理 本 地 数据 缓存 。 
示例 代码 如 下 : 


wx.clearStorageSync(); 
// 阻 塞 下 面 代码 
doSsomethirg(); 


5.5 位 置 
5.5.1 ”获取 位 置 


在 国际 上 ， 坐 标 体 系 有 多 套 标准 ， 小 程序 支持 WGS84 标 准 和 
GCj02 标 准 ，WGS84 是 地 球 坐 标 系 ， 国 际 上 通用 的 坐标 系 。 设 备 一 般 
包含 的 GPS 必 片 或 者 北斗 芯片 所 获取 的 经 纬度 为 WGS84 地 理 坐 标 系 。 
GCJ02 坐 标 系 为 火星 坐标 系 ， 是 由 中 国 国家 测绘 局 制订 的 地 理 信息 系 
统 的 坐标 系统 ， 它 是 由 WGS84 坐 标 系 经 加 密 后 的 坐标 系 ， 它 是 在 小 程 
序 中 ， 查 看 位 置 需要 使 用 GCJ02 标 准 坐 标 。 


wx.getLocation (Object) 用 于 获取 当前 的 地 理 位 置 、 速 度 ， 需 要 
用 户 开局 定位 功能 ， 当 用 户 离开 小 程序 后 ， 此 接口 无 法 调用 ;， 当 用 户 
点 击 “ 显 示 在 聊天 顶部 ?时 ， 此 接口 可 继续 调用 ，Object 参 数 属性 如 
下 : 


type: 默认 为 wgs84 返 回 gps 坐 标 ，gcj02 返 回 可 用 于 


wxX.0penLocation 的 坐标 。 


.Success: 接口 调用 成 功 的 回调 函数 ， 必 填 项 ， 返 回 参数 属性 如 
下 : 


.latitude: 纬度 ， 浮 点 数 ， 范 围 为 -90~90， 负 数 表 示 南 纬 。 


.longitude: 经 度 ， 浮 点 数 ， 范 围 -180~180， 负 数 表示 西 经 。 
.Speed: 速度 ， 浮 点 数 ， 单 位 m/s。 


accuracy: 位 置 的 精确 度 。 
fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 


) 。 


示例 代码 如 下 : 


wx.getLocation( { 
type : 'wgs84', 
success : function( res ) { 
console.log( res );，; 


} 
} ); 


5.5.2 ”选择 位 置 
wx.chooseLocation (Object) 用 于 打开 地 图 选择 位 置 ， 用 户 选 中 后 
返回 选中 信息 ，Object 参 数 属性 如 下 : 


success: 接口 调用 成 功 的 回调 函数 ， 必 填 项 ，success 返 回 参 数 属 
性 如 下 : 


name: 位 置 名 称 。 

'address: 详细 地 址 。 

latitude: 纬度 ， 译 点 数 ， 范 围 为 -90~90， 负 数 表示 南 纬 。 
-longitude: 经 度 ， 序 点 数 ， 范 围 为 -180 一 180， 负 数 表示 西 经 。 
:cancel: 用 户 取 消 时 调用 。 

-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.chooseLocation( { 
success : function( res ) { 
console.log( res.address );，; 
} 
} ); 


5.5.3 ”查看 位 置 


wx.openLocation (Object) 用 于 在 微 信 内 置地 图 查看 位 置 ，Object 
参数 属性 如 下 : 


latitude: 纬度 ， 范 围 为 -90~90， 负 数 表示 南 纬 ， 必 填 项 。 
-longitude: 经 度 ， 范 围 为 -180~180， 负 数 表 示 西 经 ， 必 填 项 。 
scale: 缩放 比例 ， 苑 围 1 一 28， 默 认为 28。 

name: 位 置 名 。 

"address: 地 址 的 详细 说 明 。 

“success: 接口 调用 成 功 的 回调 函数 。 

-fail 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


行 ) 。 
示例 代码 如 下 


wx.getLocation( { 
type : 'gcj02'， // 返回 可 用 于 wx .openLocation 的 经 纬度 
success : function( res ) { 
wx.open( { // 显示 当前 地 址 


latitude : res.latitude, 
longitude : res.longitude 


} ); 
} 
} ); 


二 和 了 


5.5.4 ”地 图 组 件 控 制 


wx.createMapContext (Object) 用 于 创建 并 返回 map 上 下 文 
mapContext 对 象 ，map-Context 通 过 mapId 跟 一 个 <map/> 组 件 绑 定 ， 通 
过 它 可 以 操作 对 应 的 <map/> 组 件 ，map-Context 对 象 方法 如 下 : 


"getCenterLocation: 获取 当前 地 图 中 心 的 经 纬度 ， 返 回 的 是 gcj02 
坐标 系 ， 可 以 用 于 wx.openLocation。getCenterLocation 参 数 属性 如 下 : 


'Success: 接口 调用 成 功 的 回调 函数 ，res={longitude: "经 度 "， 
latitude: "纬度 "}。 


-fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


-moveToLocation: 将 地 图 中 心 移动 到 当前 定位 点 ， 需 要 配合 map 


组 件 的 show-location 使 用 。 
示例 代码 如 下 : 


<map id="myMap" show-location/> 有 
<button data-type="getCenterLocation" bindtap="action"> 获 取 位 </button> 
<button data-type="location" bindtap="action"> 移 动 位 置 </button> 


Page( { 


onReady : function( e ) { 
this.mapContext = wx.createMapContext( 'myMap' ); 
}, 


action : function( e ) { 
var type = e,tareget,dataset,type， 
mapContext = this.mapContext; 


Switch ( type ) { 
// 获取 当前 地 图 中 心 纬度 
case 'getCenterLocation ' : 
mapContext .getCenterLocation( { 
success : function( res ) { 
console.log( res.longitude + ',' + res.]latitude ); 
} 
} ); 
// 定位 到 当前 位 
case 'location': 
mapContext.moveToLocation( ) ， 


5.6 ”设备 


5.6.1 系统 信息 


1.wx.getSystemInfo (Object) 
异步 获取 系统 信息 。Object 参 数 属性 为 


.Success: 接口 调用 成 功 回 调 函 数 ， 返 回 系 统 相 关 信息 ， 必 填 项 ， 
返回 参数 属性 如 下 : 


:model: 手机 型 号 。 
.pixelRatio: 设备 像素 比 。 
-windowWidth: 窗口 宽度 。 


.windowHeight: 窗口 高 度 。 


language: 微 信 设置 的 语言 。 


.version: 徽 信 版 本 号 。 


system: 操作 系统 版 本 。 


:platform: 客户 端 平 台 。 
fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.getSystemInfo( { 
success : function( info ) { 
console.log( info ); 


}); 
2.wx.getSystemInfoSync () 
同步 获取 系统 信息 。 
示例 代码 如 下 : 


var info = wx.getSystemInfoSync(); 
console.1og( info ); 


5.6.2 ”网 络 状态 
wx.getNetworkType (Object) 用 于 获取 网 络 类 型 ，Object 参 数 属 性 
如 下 : 


“success: 接口 调用 成 功 回 调 函 数 ， 返 回 网 络 类 型 networkType， 必 
填 项 。 


-fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.getNetworkType( { 
success : function( res ) { 
console.log( res.networkType ); 


} 
} ); 


5.6.3 ”重力 感应 


wx.onAccelerometerChange (callback) 用 于 监听 重力 感应 数据 ， 
频率 : 5 次 / 秒 ，callback 返 回 参数 属性 如 下 : 


x: 又 轴 重力 感应 ， 值 为 当前 轴 上 重力 加 速度 /重力 加 速度 
(9.8) 。 


y: Y 轴 重力 感应 ， 值 参考 x 轴 。 
Zz: Z 轴 重力 感应 ， 值 参考 x 轴 。 
示例 代码 如 下 : 


<view>{{x}}, {{y}}, {{z}}</view> 


Page( { 
data : {X : OQ,y : 0,z : 0}, 
onReady : function() { 
Var self = this,; 
wx.onAccelerometerCchange(function(res) 
self,.setData( {x : res.Xx,y : res.y,z : res.z} ); 


}) 
} 
} ); 


5.6.4” 罗 姐 


wx.onCompassChange (callback) 用 于 监听 罗盘 数据 ， 频 率 : 5 次 / 
秒 ， 调 用 罗盘 需要 开启 定位 功能 ，callback 参 数 的 属性 有 direction: 当 
剖面 同 的 方 同上 度数 ， 正 北方 为 0， 范 围 为 0~360，-1 代 表 没有 开启 定位 


示例 代码 如 下 : 


wx.onCompressChange( function( res ) { 
console.log( res.direction );，; 


} ); 


5.6.5 ”挨打 电话 


wx.makePhoneCall (Object) 用 于 调用 手机 拨打 电话 功能 ，Object 
参数 的 属性 如 下 : 


:PhoneNumber: 需要 拨打 的 电话 号 码 ， 必 填 项 。 
success: 接口 调用 成 功 回调 函数 。 
-fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


示例 代码 如 下 : 


wx.makePhoneCall 
phoneNumbser : '1345678910 


5.6.6” 扫 三 


scanCode (Object) 调 起 客户 端 扫 码 界 面 ， 扫 码 成 功 后 返回 对 应 
结果 。Object 参 数 如 下 : 


success: 接口 调用 成 功 的 回调 画 数 ， 返 回 参数 如 下 : 
result， 扫 码 的 内 容 。 

scanType: 所 扫 码 的 类 型 。 
-charSet， 所 扫 码 的 字符 集 。 


:path: 当 所 扫 的 码 为 当前 小 程序 的 合法 二 维 码 时 ， 会 返回 此 字 
段 ， 内 容 为 二 维 码 携 市 的 path 。 


fail: 调用 接口 失败 的 回调 函数 。 


:complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.scanCode( { 
success : function( res ) { 
// 打印 扫 码 内 容 
console.log( res.result ); 


57 下面 


反而 


1.wx.showToast (Object) 


显示 消息 提示 杠 ，Object 参 数 的 属性 如 下 : 
title: 提示 内 容 ， 必 十 项 。 


"icon: 图 标 ， 只 支持 ”success”、”loading”。 


-duration: 提示 的 延迟 时 间 ， 到 了 指定 时 间 上 自动 关闭 ， 单 位 训 
秒 ， 默 认为 1500， 最 大 为 10000 。 


.mask: 是 否 显示 透明 蒙 层 ， 防 止 触 摸 穿 透 ， 默 认为 false。 
.Success: 接口 调用 成 功 回 调 函 数 。 
.fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.showToast( { 
title : ' 操 作成 功 '， 
Icon : 'sSuccess' 


} ); 


2.wx.hideToast () 
隐 闫 消 晨 提示 框 。 
示例 代码 如 下 : 


wx.showToast( 
title : ' 请 稍 等 ..'， 


icon : 'loading', 
duration : 10000 
} ); 


setTimeout( function() { // 或 请 求 返回 时 关闭 toast 
wx.hideToast(); 
}, 2000 ); 


3.wx.showModal (Object) 


显示 模 态 弹 窗 ，Object 参 数 的 属性 如 下 : 
:title: 提示 的 标题 ， 必 填 项 。 
content: 提示 的 内 容 ， 必 填 项 。 


.ShowCancel: 是 否 显 示 取 消 按 钮 ， 默 认为 true 。 


-cancelText: 取消 按钮 的 文字 ， 默 认为 “取消 ”， 最 多 为 4 个 字符 


[© 


.cancelColor: 取消 按钮 的 文字 颜色 ， 默 认为 #000000”。 
confirmText: 人 确定 按钮 的 文字 ， 默 认为 “人 确定”"， 最 多 4 个 字符 。 
confirmColor: 确定 按钮 的 文字 颜色 ， 默 认为 “#3CC51F?” 


.Success: 接口 调用 成 功 回 调 函 数 ， 返 回 结果 res.confirm 为 true 时 ， 
表示 用 户 点 击 确定 按钮 。 


-fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


在 Android 微 信 6.6.30 版 中 ，wx.showModal 返 回 的 confirm 一 直 为 


true ° 
示例 代码 如 下 : 


wx.showModal( { 
title : ' 标 题 '， 
content :; ' 内 容 '， 
success : function( res ) { 
If ( !Ires.confirm ) { 
return; // 用 户 点 击 了 取消 ， 不 作 任 何 处 理 


console.1l0g( ' 用 户 点 击 了 确定 ' ); // 可 以 继续 流程 
} 
} ); 


4.wx.showActionSheet (Object) 


显示 操作 菜单 ，Obejct 参 数 的 属性 如 下 : 

-itemList: 按钮 的 文字 数组 ， 数 组 长 度 最 大 为 6 个 ， 必 填 项 。 
-itemColor: 按钮 的 文字 颜色 ， 默 认为 "#000000"。 

success: 接口 调用 成 功 回 调 函 数 ， 返 回 参数 如 下 : 

-cancel: 用 户 是 否 取消 选择 。 

tapIndex: 用 户 点 击 的 按钮 ， 从 上 到 下 的 顺序 ， 从 0 开始 。 
fail 接口 调 用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 
和 


示例 代码 如 下 : 


wx.showActionSheet( { 
itemList : [' 缺 货 '，' 配 送 时 间 选 错 '，' 不 想 买 了 '，' 其 他 ']， // 可 户 取消 原因 
success : function( res ) { 
If ( Ires.cancle ) 
console.log( res.tapIndex ); 


5.7.2 ”设置 导航 条 


1.wx.setNavigationBarTitle (Object) 

动态 设置 当前 页 面 的 标题 ，Object 参 数 属性 如 下 : 
title: 页 面 标题 ， 必 填 项 。 

success: 接口 调用 成 功 的 回调 函数 。 

fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 
人 


示例 代码 如 下 : 


wx.setNavigationBarTitle( { 
而 ! 


title : “ 猥 贝 面 


} ); 


2.Wx.showNavigationBarLoading () 
在 当前 页 面 显示 导航 条 加 载 动画 。 


示例 代码 如 下 : 


Page( { 
onShow : function() { 
wx.showNavigationBarLoading(); 


} 
} ); 


3.wx.hideNavigationBarLoading () 
隐藏 导航 条 加 载 动 画 。 


示例 代码 如 下 : 


Page( { 
onLaunch : function() { 
wx.hideNavgationBarLoading(); 


} 
} ); 


天 


5.7.3 “导航 


1.wx.navigateTo (Object) 


保留 当前 页 面 ， 跳 转 到 应 用 内 的 某 个 页 面 ， 使 用 wx.navigateBack 
可 以 返回 到 原 页 面 ， 小 程序 中 页 面 路 径 最 多 5 层 。Object 参 数 的 属性 如 
下 ; 


-url: 需要 跳 转 的 应 用 内 页 面 的 路 径 ， 路 径 后 可 以 帝 参 数 ， 必 填 
项 。 参 数 与 路 径 之 间 使 用 *“? ”分 隔 ， 参 数 键 与 参数 信用 “=” 相 连 ， 不 同 
参数 用 “&” 分 隔 ; 如 path? key=value&key2=value2'。 


.Success: 接口 调用 成 功 的 回调 函数 。 
:fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


示例 代码 如 下 : 


wx.navigateTo( 
Url : '../newpage?key1l=value1' 


} ); 


Page( { 
onLoad : function( option ) { 
console.log( option.query ); 


2.wWx.redirectTo (Object) 


关闭 当 前 页 面 ， 跳 转 到 应 用 内 的 某 个 页 面 ，Object 参 数 属性 如 
下 ; 


-url: 需要 跳 转 的 应 用 内 页 面 的 路 径 ， 路 径 后 可 以 市 参数 ， 必 填 
项 。 参 数 与 路 径 之 间 使 用 ? 分 隔 ， 人 参数 键 与 参数 值 用 = 相连 ， 不 同 参 
数 用 & 分隔; 如 path? key=value&key2=value2' 。 


.Success: 接口 调用 成 功 的 回调 函数 。 
:fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


示例 代码 如 下 : 


wx.redirectTo( { 
rl : '../newpage?key1l=value1' 


} ); 


3.wx.SwitchTab (Object) 


跳 转 到 tabBar 页 面 ， 并 关闭 其 他 所 有 非 tabBar 页 面 。 Object 参 数 的 
属性 如 下 : 


-url: 需要 跳 转 的 tabBar 页 面 的 路 径 〈 需 在 app.json 的 tabBar 字 段 定 
义 的 页 面 ) ， 路 径 后 不 能 带 参数 ， 必 填 项 。 


“success: 接口 调用 成 功 的 回调 函数 。 
:fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


行 ) 。 


示例 代码 如 下 : 


// app.json 配 置 tabBar 


"tabBar” : { 
'list" : 
pagePath "home" 
t 1 p 1 mh 
},4 
"pagePath "other 
"text" : 也 页 面 " 
}] 
} 


wx.switchTab( { 
Url ; '/home' // 必须 是 已 注册 tab 
} ); 


4.wx.navigateBack (Object) 


关闭 当前 页 面 ， 返 回 上 一 页 面 或 多 级 页 面 。 可 通过 
getCurrentPages () 获取 当前 的 页 面 栈 ， 以 决定 返回 儿 层 。Object 参 数 
的 属性 为 delta 返回 的 页 面 数 ， 如 果 delta 大 于 现 有 的 页 面 数 ， 则 返回 
到 首页 ， 默 认 值 为 1 。 


示例 代码 如 下 : 


// 向 前 返回 3 级 
wx.navigateBack( { delta : 3 } ); 


5.7.4 动画 


wx.createAnimation (Object) 用 于 创建 一 个 动画 实例 animation 。 
可 以 调用 动画 实例 的 方法 来 描述 动画 ， 最 后 通过 动画 实例 的 export 方 
法 导出 动画 数据 ， 传 递 给 组 件 animation 属 性 ， 每 次 调用 exports 方 法 会 
清 掉 之 前 的 动画 操作 。Object 参 数 的 属性 如 下 : 


.duration: 动画 持续 时 间 ， 单 位 ms， 默 认 值 400 。 


-timeingFunction: 定义 动画 的 效果 ， 默 认 值 "linear"， 有 效 值 
为 "linear" 、"ease" 、"ease-in"、"ease-in-out" 、"ease-out" 、"step- 


start" ~、 "step-end" ° 
-delay: 动画 延迟 时 间 ， 单 位 ms， 默 认 值 0。 


-transformOrigin: 设置 transform-origin， 默 认为 "50%50%0"。 


示例 代码 如 下 : 

var animation = wx. 0 { 
or re : '0 0'，// 已 左上 角 为 中 心 点 
duration : 20000, 
timingFunction : "ease-in' 

} ); 


1. 动 男 摘 述 


创建 实例 后 我 们 需要 调用 实例 动画 方法 来 描述 动画 ， 这 些 方法 调 
用 后 会 返回 目 身 ， 文 持 链 式 调用 的 写法 ， 动 画 描 述 方 法 按 类 型 可 分 为 
样式 、 旋 转 、 缩 放 、 侦 移 、 倾 任 、 和 矩阵 变形 ， 下 面 分 别 介 


(1) 样式 

opacity (value) : 设置 透明 度 ， 参 数 说 明 : 

value: 透明 度 ， 参 数 范围 0~1。 

:backgroundColor (color) : 设置 背景 颜色 ， 人 参数 说 明 : 
-color: 颜色 值 。 

.width (length) : 设置 宽度 ， 参 数 说 明 : 


Jength: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 自 
定义 单位 的 长 度 值 。 


.height (length) : 设置 高 度 ， 参 数 说 明 : 


length: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 自 
定义 单位 的 长 度 值 。 


:top (length) : 设置 top 属 性 ， 参 数 说 明 : 


ength: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 


定义 单位 的 长 度 值 。 


left (length) : 设置 left 必 性， 参数 说 明 : 


-length: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 


定义 单位 的 长 度 值 。 


:bottom (length) : 设置 bottom 必 性， 参数 说 明 : 


-length: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 


定义 单位 的 长 度 值 。 
Tight (length) : 设置 right 必 性， 参数 说 明 : 


-length: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px 
定义 单位 的 长 度 值 。 


(2) 旋转 
rotate (deg) : 从 原点 顺 时 针 旋转 一 个 deg 角 度 ， 


-deg: 旋转 角度 ， 范 围 -180~180。 


可 传 入 其 他 自 


可 传 入 其 他 自 


可 传 入 其 他 自 


， 可 传 入 其 他 目 


参数 说 明 : 


TotateX (deg) : 在 X 轴 旋转 一 个 deg 和 角度， 参数 说 明 : 


deg: 旋转 角度 ， 范 围 -180~~180 。 


:rotateY (deg) : 在 Y 轴 旋转 一 个 deg 和 角度 ， 参 数 说 明 : 
-deg: 旋转 角度 ， 范 围 -180~180。 

TotateZ (deg) : 在 Z 轴 旋转 一 个 deg 角 度 ， 参 数 说 明 : 
deg: 旋转 角度 ， 范 围 -180~~180 。 

Totate3d (x，y，z，deg) : 旋转 的 简写 方法 ， 参 数 说 明 : 
X: 在 X 轴 的 旋转 角度 ， 范 围 -180~~180。 

:y: 在 y 轴 的 旋转 角度 ， 范 围 -180~180。 

Z: 在 z 轴 的 旋转 角度 ， 范 围 -180~~180。 

-deg: 从 原点 顺 时 针 旋 转 的 角度 ， 范 围 -180~180。 

(3) 缩放 

scale (sx，sy) : 同时 设置 在 X 轴 、Y 轴 的 缩放 ， 参 数 说 明 : 


sxX: 一 个 参数 时 ， 表 示 在 X 轴 、Y 轴 同时 缩放 sx 倍数 ， 两 个 参数 时 
表示 在 X 轴 缩放 sx 倍数 。 


“sy: Y 轴 缩放 的 sy 倍数 ， 可 以 不 填写 。 


scaleX (sx) : 设置 X 轴 缩放 ， 参 数 说 明 : 


sx: 又 轴 缩放 的 sx 倍数 。 

scaleY (sy) : 设置 Y 轴 缩放 倍数 ， 参 数 说 明 : 

sy: Y 轴 缩放 的 sy 倍数 。 

scaleZ (sz) : 设置 Z 轴 缩放 倍数 ， 参 数 说 明 : 

sz: Z 轴 缩放 的 sz 倍数 。 

scale3d (sx，sy，Sz) : 同时 控制 X、Y、Z 轴 缩放 : 
sx: 又 轴 缩放 的 sx 倍数 。 

sy: Y 轴 缩放 的 sy 倍数 。 

“sz: Z 轴 缩放 的 sy 倍数 。 

(4) 偏 移 

:translate (tx，ty) : 表示 在 X、Y 轴 偏 移 量 ， 参 数 说 明 : 


tx: 一 个 参数 时 ， 表 示 在 X 轴 偏 移 tx， 单 位 px;， 两 个 参数 时 ， 表 示 
在 X 轴 仿 移 tx 。 


ty: 在 Y 轴 偶 移 ty， 单 位 px。 


-translateX (tx) : 表示 在 X 轴 偏 移 量 ， 参 数 说 明 : 


tx: 在 X 轴 偏 移 tx， 单 位 px。 
translateY (ty) : 表示 在 Y 轴 偏 移 量 ， 参 数 说 明 : 
ty: 在 Y 轴 偏 移 ty， 单 位 px。 
-translateZ (tz) : 表示 在 Z 轴 偏 移 量 ， 人 参数 说 明 : 
tz: 在 Z 轴 偏 移 tz， 单 位 px 。 


tranlate3d (tx，ty，tz) : 表示 在 XxX、Y、Z 轴 偏 移 量 ， 参 数 说 
明 : 


-tx: 在 X 轴 偶 移 多， 单位 px。 

ty: 在 Y 轴 偶 移 ty， 单 位 px。 

tz: 在 羽 轴 偏 移 z， 单 位 px。 

(5) 倾斜 

skew (ax，ay) : 表示 在 X、Y 轴 倾斜 ， 参 数 说 明 : 


-ax: 该 方法 有 一 个 参数 ax 时 ，Y 轴 坐标 不 变 ，X 轴 坐标 延 顺 时 针 
倾斜 ax 度 ， 有 两 个 参数 (ax，ay) 时 ， 表 示 在 X 轴 倾斜 ax 度 。 


-ay: ， 在 Y 轴 倾斜 ay 度 。 


.skewX (ax) : 表示 在 X 轴 倾斜 ， 参 数 说 明 : 
ax: X 轴 倾斜 ax 度 。 

:skewY (ay) : 表示 在 Y 轴 倾斜 ， 参 数 说 明 : 
ay: ， 在 Y 轴 倾斜 ay 度 。 

(6) 矩阵 变形 


:matrix (a, b,，c,，d，tx，ty) : 定义 矩阵 变形 ， 基 于 X 轴 和 Y 轴 
举 标 重新 定位 元 素 位 置 ， 同 CSS3 中 transform-function matrix 。 


-matrix3d () : 定义 矩阵 变形 ， 基 于 X 轴 、Y 轴 、Z 轴 重新 定位 元 
素 位 置 ， 同 CSS3 中 transform-function matrix3d 。 


矩阵 变形 相对 复杂 ， 小 程序 矩阵 变形 同 CSS3 中 的 矩阵 变形 方法 一 
样 ， 大 家 可 以 参考 网 络 资料 。 


2. 动 男 队列 


调用 动画 操作 方法 后 要 调用 step () 来 表示 一 组 动画 完成 ， 可 以 
在 一 组 动画 中 调用 任意 多 个 动画 方法 ， 一 组 动画 中 的 所 有 动画 会 同时 
开始 ， 一 组 动画 完成 后 才 会 进行 下 一 组 动画 。step 可 以 传 入 一 个 跟 
wx.createAnimation () 一 样 的 配置 参数 ， 用 于 指定 当前 组 动画 的 配 


置 。 在 iOS/Android 微 6.3.30 版 中 ， 通 过 step () 分 隔 动画 时 ， 


步 动画 能 生效 。 


| 


示例 代码 如 下 : 


<view style="width:100%;height:200px;"> 
<icon animation="{{animData}}" style="position:absolute;left:100px;" 
type="success" size="40"/> 
</view> 
<button bindtap="rotateAndMove"> 旋 转 并 移动 </button> 
<button bindtap="rotateThenMove"> 旋 转 后 移动 </button> 


Page({ 
data: { 
animData: {} 
}, 


// 旋转 并 移动 
rotateAndMove : function() { 
var anim = wx.createAnimation( { 
duration : 1000, 
timingFunction : "ease' 


} ); 
// 同时 执行 2 个 动 
anim,.translateY( '100px' ).rotate( '720' ).step(); 
this.setData( { 

animData : anim.export() 


} ); 


. 


// 旋转 后 再 移动 
rotateThenMove : function() { 
var anim = wx.createAnimation( { 
timingFunction : "ease' 


国 | 


} ); 
// 分 步 执行 3 个 动画 ， 通 过 step 切 割 
anim,rotate( '720' ).step( { duration : 500 } ) 
anim.translateY( '100px' ).step( { duration : 500 } ) 
anim.translateX( '100px' ).step( { duration : 500 } ); 
this.setData( { 

animData : anim.export() 


} ); 


} 
}); 


5.75 综 图 


上 章 提 到 过 <canvas/> 组 件 ， 在 <canvas/> 组 件 中 画图 必须 通过 本 人 小 
结 介绍 的 API 实 现 ，<canvas/> 中 存在 一 个 二 维 坐标 体系 ， 堪 上 角 的 坐标 
为 (0，0) ， 所 有 绘图 API 都 会 基于 这 个 坐标 体系 进行 绘制 。 绘 图 过 程 
大 致 可 分 为 3 步 : 


1) 创建 执行 上 下 文 。 
2) 通过 执行 上 下 文 进行 绘制 描述 。 
3) 调用 绘图 API， 将 绘制 摘 述 绘制 到 到 <canvas/>。 


示例 代码 如 下 ， 绘 图 演示 如 图 5-2 所 示 。 


设置 ”动作 帮助 微 信 开发 者 工具 0.11.122100 一 Xx 


2 iPhone 4 wifi Console 


DD Hide network m 


A | Errors Warni 


$s |Console 


图 5-2 ”绘图 演示 


<canvas canvas-id="myCanvas" style="width:200px; height:200px; border:solid 1px"/> 


Page( { 

onReady : function() { 
// 第 1 步 ， 创建 执行 上 下 文 
Var canvasContext = wx.createCanvasContext( 'myCanvas' ); 
// 第 2 步 ， 设 置 绘制 描述 
canvasContext ,SetFillStyle( 'red' ); 
canvasContext.fillRect( 10，10，110，110 ); 
// 第 3 步 ， 绘 图 
canvasContext .draw(); 


1. 基 础 API 


(1) wx.createCanvasContext (canvasId) 


在 绘图 时 我 们 需要 调用 wx.createCanvasContext () 创建 一 个 绘图 
上 下 文 context 对 象 ， 一 个 canvasContext 通 过 canvasId 与 <canvas/> 一 一 绑 


定 ，canvasContext 仅 作用 于 对 应 的 <canvas/>， 通 过 调用 绘图 上 下 文 相 
天 方法 实现 绘图 功能 。 


示例 代码 如 下 : 


Var context = wx.createCanvasContext( 'myCanvas' ); 


(2) wx.canvasToTempFilePath (Object) 


将 当前 画布 内 容 导 出 生成 图 片 ， 并 返回 文件 路 径 。Object 参 数 的 属 
Joa hs 


-canvasId: 画布 标识 ， 指 定 导 出 哪个 画布 ， 传 入 定义 在 <canvas/> 


的 canvas-id 。 


“success: 接口 调用 成 功 的 回调 函数 ， 返 回 参数 属性 有 
tempFilePath: 导出 图 片 的 文件 路 径 。 


fail: 接口 调用 失败 的 回调 画 数 。 


complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


wx.canvasToTempFilepPath( { 
canvasId : 'myCanvas', 
success : function( res ) { 
// 打印 出 图 片 路 径 
console.log( res,tempFilePath ); 


} 
} ); 


2.canvasContext 对 象 方法 


<canvas/> 所 有 绘图 行为 都 需要 调用 绘图 上 下 文 相关 方法 实现 ， 这 
些 方法 整体 可 分 为 10 类 : 样式 、 渐 变 、 线 条 样式 、 和 矩阵 、 路 径 、 变 
形 、 文 字 、 图 片 、 混 合 、 其他。 


人 


样式 设置 会 全 局 作用 于 全 局 ， 如 果 没 有 和 窗 盖 ， 后 续 绘图 的 颜色 将 
沿用 之 前 的 设置 ， 样 式 设置 相关 方法 如 下 : 


setFillStyle (color) : 设置 填充 颜色 ， 没 有 设置 默认 为 black。 参 
数 为 color: 设置 为 填充 样式 的 颜色 ， 参 数 可 为 颜色 字符 串 ， 取 值 范 
围 : rgb \255，0，0) '、'rgba (255，0，0，0.6) '、 ##ff0000' 格 式 的 颜 
色 字 符 串 ;也 可 为 渐变 颜色 对 象 。 


.SetStrokeStyle (color) : 设置 描 边 颜色 。 人 参数 为 color， 同 上 。 


.SetShadow (offsetX，offsetY，blur，color) : 设置 阴影 ， 参 数 说 
明 如 下 : 


offsetX: 阴影 相对 于 形状 在 水 平方 同 的 偏 移 。 
offsetY: 阴影 相对 于 形状 在 竖 直 方向 的 偏 移 。 
blur: 阴影 的 模糊 级 别 ， 数 值 越 大 越 模 糊 。 


:color: 阴影 的 颜色 ， 取 值 范围 : rgb (255，0，0) ' 或 rgba 
(255，0，0，0.6) ' 或 ff0000' 格 式 的 颜色 字符 串 。 


| 


示例 代码 如 下 ， 效 果 见 图 5-3: 


<canvas canvas-id="myCanvas" style="width:100%; height:400px;"/> 


Page( { 
onReady : function() 
Var canvasContext = wx.createCanvasContext( 'myCanvas' ); 
// 填充 方形 
canvasContext ,SetFillStyle( 'red' ); 
canvasContext.fillRect( 10, 10, 50, 50 ); 


// 绘制 方 框 
canvasContext.setStrokeSstyle( '#0000ff"' ); 
canvasContext.strokeRect( 70, 10, 50, 50 ); 


// 绘制 带 阴 影 方形 

canvasContext. SetShadow( 10, 10, 50, ‘rgb( 0, 255, © )'" ); 
// 这 里 盾 充 的 方形 颜色 受到 第 一 句 代码 影响 ， 也 为 红色 
canvasContext.fillRect( 130, 10, 50, 50 ); 


canvasContext .draw( ); 
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图 5-3 样式 方法 示例 


(2) 渐变 


渐变 相关 方法 用 于 创建 渐变 对 象 ， 渐 变 对 象 可 作为 参数 传 入 绘图 
相关 方法 ， 创 建 渐变 的 坐标 是 基于 <canvas/> 的 坐标 ， 而 不 是 被 填充 图 
形 的 坐标 ， 在 使 用 渐变 填充 图 像 时 一 定 要 注意 坐标 的 转化 ， 创 建 渐变 
相关 方法 如 下 : 


:createLinearGradient (x0，y0，x1，y1) : 创建 一 个 线性 渐变 ， 参 
数 如 下 : 


x0: 起 点 的 x 坐标 。 
:y0: 起 点 的 y 坐 标 。 
x1: 终点 的 x 坐标 。 
‘yl: 终点 的 y 坐 标 。 


:createCircularGradient (x，y, r) : 创建 一 个 圆 形 的 渐变 ， 起 点 在 
圆心 ， 终 点 在 圆 环 ， 参 数 如 下 : 


X: 圆心 的 x 坐 标 。 
y: 圆心 的 y 坐 标 。 


Tt: 圆 的 半径 。 


SN 


.addColorStop (stop，color) : 创建 一 个 颜色 渐变 点 ， 参 数 说 明 : 
.stop: 表示 渐变 点 在 起 点 和 终点 中 的 位 置 ， 取 值 范 围 0~1 。 


.color: 渐变 点 的 颜色 ， 取 值 范 围 ，'rgb (255，0，0) ' 或 rgba 
(255，0，0，0.6) ' 或 #ff0000' 格 式 的 颜色 字符 串 。 


示例 代码 如 下 ， 效 果 见 图 5-4: 


<canvas canvas-id="myCanvas" style="width:100%; height:400px;"/> 


Page( { 
onReady : function() { 


Var canvasContext = wx.createCanvasContext( 'myCanvas' ), 
linearGradient, circularGradient, colorStop; 


// 需要 根据 图 形 对 渐变 坐标 进行 换算 
linearGradient = canvasContext.createLinearGradient(0, 0, 100, 0); 
// 创建 渐变 时 ， 至 少 创建 2 个 渐变 点 ， 开 始 与 结束 
linearGradient.addColorStop(0, 'black'); 
linearGradient.addColorStop(1, 'red'); 

// 填充 方形 
canvasContext ,SetFillStyle( linearGradient ); 
canvasContext.fillRect( 10，10，100，100 ) 


// 需要 根据 图 形 对 渐变 坐标 进行 换算 
circularGradient = canvasContext .createCircularGradient( 170,60,50 ); 
// 可 以 创建 多 个 渐变 点 

circularGradient ,addCcolorStop(9， "red ' ) ; 
circularGradient.addColorStop(0.16, 'orange ' ) 
circularGradient.addColorStop(0.33, 'yellow'); 
circularGradient.addColorStop(0.5, 'green'); 
circularGradient.addColorStop(0.66, 'cyan'); 
circularGradient.addColorstop(0.83, 'blue'); 
circularGradient.addColorStop(1, 'purple'); 

// 填充 方形 
canvasContext.setFillStyle( circularGradient ); 
canvasContext.fillRect( 120, 10, 100, 100 ); 


canvasContext .draw( ); 
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图 5-4 渐变 方法 示例 


(3) 线条 样式 

和 样式 设置 一 样 ， 线 条 样式 设置 会 全 局 作用 于 全 局 ， 如 果 没 有 禾 
盖 ， 后 续 绘 图 的 设置 将 治 用 之 前 的 设置 ， 线 条 样式 方法 如 下 : 

.SetLineWidth (lineWidth) : 设置 线条 的 宽度 ， 默 认 线条 宽度 为 
1px。 参 数 包 括 lineWidth: 线条 的 宽度 ， 单 位 为 px 。 


setLineCap (ineCap) : 设置 线条 结束 端点 样式 ， 默 认 结 束 端 点 
样式 为 square。 人 参数 说 明 包 括 lineCap: 线条 的 结束 端点 样式 ， 取 值 有 : 


“square: 端点 样式 为 正方 形 ， 不 会 截取 线条 宽度 。 
butt， 端 点 样式 为 正方 形 ， 会 截取 线条 宽度 
Tound: 端点 样式 为 圆 形 ， 不 会 截取 线条 宽度 。 


:setLineJoin (lineJoin) : 设置 线条 的 交点 样式 ， 默 认 交 叉 点 样式 
为 miter。 人 参数 包括 lineJoin: 线条 的 结束 交叉 点 样式 ， 取 值 有 : 


:bevel: 平角 。 
:Tound: 图 角 。 
:miter: 人 尖 角 。 


setMiterLimit () : 设置 最 大 斜 接 长 度 ， 斜 接 长 度 指 的 是 在 两 条 线 
交汇 处 内 角 和 外 角 之 间 的 距离 。 当 setLineJoin 为 miter 时 才 有 效 。 超 过 最 
大 倾斜 长 度 的， 连接 处 将 以 lineJoin 为 bevel 来 显示 ， 参 数 包括 
miterLimit: 最 大 斜 接 长 度 。 


示例 代码 如 下 ， 效 果 见 图 5-5: 


<canvas canvas-id="myCanvas" style="width:100%; height:700px;"/> 


var _fn; 


Page( { 
onReady : function() { 
Var canvasContext = wx.createCanvasContext( 'myCanvas' ); 


// 设置 线 宽度 
canvasContext.setLinewidth( 10 ); 


// 端点 样式 为 正方 形 ， 不 会 截取 线条 宽度 
canvasContext.setLineCap( 'square' ); 

_fn.drawLine( canvasContext, [10, 20], [i150, 20] ); 
// 端点 样式 为 正方 形 ， 但 会 截取 线条 宽度 
canvasContext.setLineCap( 'butt"' ); 

_fn.drawLine( canvasContext, [10, 40], [i150, 40] ); 
// 端点 样式 为 圆 形 ， 不 会 截取 线条 宽度 

canvasContext ,setLineCap( 'round' ); 

_fn.drawLine( canvasContext, [10，60]，[150，60] ); 


// 恢复 为 默认 线条 边界 
canvasContext.setLineCap( 'square' ); 


// 交叉 处 为 平角 
canvasContext.setLineJoin('bevel'); 
_fn.drawAngle( canvasContext, [10, 80] ); 


canvasContext.setLineJoin('round'); 
_fn.drawAngle( canvasContext, [50, 80] ); 
// 交叉 处 为 尖 角 
CanvasContext .SetLineJoin( 'miter ')， 
fn.drawAngle( canvasContext， [90，80] ); 


// 设置 交叉 处 为 尖 角 
CanvasContext .SetLineJoin( 'miter ')， 


canvasContext.setMiterLimit(1); 
_fn.drawAngle( canvasContext， [10, 140] ); 


canvasContext.setMiterLimit(2); 
_fn.drawAngle( canvasContext, [50, 140] ); 


canvasContext.setMiterLimit(3); 
_fn.drawAngle( canvasContext, [90, 140] ); 


canvasContext .draw( ); 


} 
} ); 


_fn={ 
drawLine : function( canvasContext, start, end ) { 
canvasContext .beginPath() 
canvasContext.moveTo(start[0], start[1]) 
canvasContext.lineTo(end[0], end[1]) 
canvasContext.stroke( ); 


}, 


drawAngle : function( canvasContext, beginpPoint ) { 
canvasContext .beginPath() 
canvasContext .moveTo(beginPoint[0], beginpPoint[1]); 
canvasContext.1lineTo(beginPoint[0] + 40, beginpPoint[1] + 20) 
canvasContext.1lineTo(beginPoint[0], beginPoint[1] + 40) 
canvasContext.stroke() 
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图 5-5 ”线条 样式 示例 
(4) 矩形 


答 形 相关 方法 如 下 : 


Tect (X，y，width，height) : 创建 一 个 和 矩形， 创建 后 需要 调用 f 记 
或 stroke () 方法 将 矩形 真正 画 到 <canvas/> 中 。 参 数 说 明 如 下 : 


We 
Pa 


X: 窍 形 路 径 左 上 角 的 x 坐标 。 


:y: 矩形 路 径 左上 角 的 y 坐 标 。 
-width: 矩形 路 径 的 宽度 。 
-height: 矩形 路 径 的 高 度 。 


fillRect (Xx，y，width，height) : 填充 一 个 和 矩形， 填充 时 需要 调 
用 setFillStyle () 设置 颜色 ， 如 果 没 设置 默认 是 黑色 。 参 数 说 明 如 下 : 


X: 和 矩形 路 径 左 上 角 的 x 坐 标 。 
y: 和 矩形 路 径 左 上 角 的 y 坐 标 。 
width 矩形 路 径 的 宽度 。 
Peight: 矩形 路 径 的 宽度 。 


strokeRect (x,，y，width，height) : 画 一 个 非 填充 的 和 矩形， 绘制 
前 需要 调用 setFillStroke () 设置 线条 颜色 ， 如 没有 设置 默认 是 黑色 。 
参数 说 明 如 下 : 


x: 矩形 路 径 左上 角 的 x 坐标 。 
y: 矩形 路 径 左上 角 的 y 坐 标 。 


-width: 矩形 路 径 的 宽度 。 


Peight: 矩形 路 径 的 曙 度 。 


:clearRect (x，y，width，height) : 清除 画布 上 在 该 矩形 区 域内 的 
内 容 ， 清 除 后 会 直接 显示 出 <canvas/> 背 景色 。 参 数 说 明 如 下 : 


O 


X: 和 矩形 路 径 左 上 角 的 x 坐 标 


Le 


y: 和 矩形 路 径 左 上 角 的 y 坐 标 
-width: 矩形 路 径 的 宽度 。 
-height: 和 窍 形 路 径 的 光度 。 
示例 代码 如 下 ， 效 果 见 图 5-6: 


<canvas canvas-id="myCanvas" style="width:100%; height:700px;"/> 


Page( { 
onReady : function() 
Var canvasContext = wx.createCanvasContext( 'myCanvas' ); 
// 绘制 线 框 矩形 
Cats tont et eee 10, 10, 30, 30 ) 
canvasContext.stroke( ); 
t 


起 


canyas Conl ex .draw( ); 
// 绘制 填充 矩形 
ca FE 50，10，30，30 ) 

CanvasContext .fil1()， 

canvasContext ,draw( true ); // 传 和 参数 true， 表 示 接 着 上 次 继续 绘 第 


// 绘制 填充 矩形 
canvasContex 
canvasContex 
// 绘制 线 框 矩 
canvasContex 
canvasContex 


// 清除 矩形 区 域 
canvasContext.clearRect( 25, 25, 40, 40 ); 
canvasContext.draw( true ); 


Ce 


.fillRect( 10, 50, 30, 30 ); 
draw( true ); 


,StrokeRect( 50, 50, 30, 30 ); 


区 
t 
ts 
区 
t 
t.draw( true ); 
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图 5-6 ”矩形 方法 示例 
(5) 路 径 


路 径 绘 制 并 不 会 在 画布 上 绘制 形状 ， 而 是 创建 一 个 线条 路 径 ， 创 
建 的 路 径 可 被 stroke () 绘制 线条 ， 也 可 被 {了 1 () 填充 区 域 ， 绘 制 路 径 
开始 时 需要 调用 beginPath () 方法 ， 结 束 时 需要 调用 closePath () 方 
法 ， 上 文 rect () 方法 可 认为 是 绘制 矩形 路 径 的 一 个 快捷 方法 ， 通 过 路 
径 方 法 组 合 ， 我 们 可 以 绘制 任何 形状 图 形 。 路 径 方法 如 下 : 


-beginPath () : 开始 创建 一 个 上 路径， 需要 调用 fill 或 者 stroke 才 会 使 
用 路 径 进行 填充 或 描 边 。 在 最 开始 的 时 候 相当 于 调用 了 一 次 beginPath 
() 。 同 一 个 路 径 内 的 多 次 setFillStyle () 、setStrokeStyle () 、 
setLineWidth () 等 设置 ， 以 最 后 一 次 设置 为 准 。 


closePath () : 关闭 一 个 路 径 。 关 闭路 径 会 连接 起 点 和 终点 。 如 
果 关 闭路 径 后 没有 调用 fl () 或 者 stroke () 并 开启 了 新 的 路 径 ， 那 之 
前 的 路 径 将 不 会 被 渲染 。 


-fl () : 对 当前 路 径 中 的 内 容 进行 填充 。 默 认 的 填充 色 为 黑色 。 
如 果 当 前 路 径 没 有 闭合 ， 纪 ] 〈) 方法 会 将 起 点 和 终点 进行 连接 ， 然 后 
填充 。fl () 填充 的 的 路 径 是 从 beginPath () 开始 计算 ， 但 是 不 会 将 
fillRect () 包含 进去 。 


stroke () : 画 出 当前 路 径 的 边框 。 默 认 颜 色色 为 黑色 。stroke 
() 描绘 的 的 路 径 是 从 beginPath () 开始 计算 ， 但 是 不 会 将 strokeRect 
(他 窒 进 夫 坟 


:moveTo (x,y) : 把 路 径 移动 到 画布 中 的 指定 点 ， 但 不 创建 线 


X: 目标 位 置 的 x 坐 标 。 


y: 目标 位 置 的 y 坐 标 。 


lineTo (x，y) : 添加 一 个 新 点 ， 然 后 在 画布 中 创建 从 该 点 到 最 后 
指定 点 的 线条 。 参 数 包括 x\`y， 同 上 。 


-arc (X，y，T，SAngle，eAngle，counterclockwise) : 添加 一 个 弧 
形 路 径 到 当前 路 径 ， 顺 时 针 绘制 ， 创 建 一 个 圆 可 以 用 arc () 方法 指定 
其 实 弧 度 为 0， 终 止 弧 度 为 2*Math.PI。 参数 说 明 如 下 : 


x: 圆 的 x 坐标 。 

y: 圆 的 y 坐 标 。 

T: 圆 的 半径 。 

SAngle: 起 始 弧度 ， 单 位 弧度 (在 3 点 钟 方向 ) 。 
-eAngle: 终止 弧度 。 


:counterclockwise: 可 选 。 指 定 弧 度 的 方向 是 逆 时 针 还 是 顺 时 针 。 
默认 是 false， 即 顺 时 针 。 


-quadraticCurveTo (cpx，cpy，X，y) : 创建 二 次 方 贝 塞 尔 曲线 ， 
曲线 的 起 始点 为 路 径 中 前 一 个 点 。 参 数 说 明 如 下 : 


-CpXx: 贝 塞 尔 控制 点 的 x 坐标 。 


-cpy: 贝 塞 尔 控制 点 的 y 坐 标 。 


X: 结束 点 的 x 坐 标 。 
y: 结束 点 的 y 坐 标 。 


.bezierCurveTo 《cp1X，cply，cp2x，cp2y，X，Vy) : 创建 三 次 方 
贝 塞 尔 曲 线 ， 曲 线 的 起 始点 为 路 径 中 前 一 个 点 。 参 数 说 明 如 下 : 


cplx， 第 一 个 贝 塞 尔 控制 点 的 x 坐 标 。 
.cply: 第 一 个 贝 塞 尔 控制 点 的 y 坐 标 。 
.cp2x: 第 二 个 贝 塞 尔 控制 点 的 x 坐 标 。 
.cp2y: 第 二 个 贝 塞 尔 控制 点 的 y 坐 标 。 
x: 结束 点 的 x 坐 标 。 
:结束 点 的 y 坐 标 。 


示例 代码 如 下 ， 效 果 见 图 5-7: 
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图 5-7 ”路径 方 法 示例 


<canvas style="width: 100%; height: 700px;" canvas-id="myCanvas"></canvas> 
var _fn; 


Page( { 
onReady : function() { 
Var context = wx.createCanvasContext( 'myCanvas' ); 


// 绘制 三 角形 线条 

_fn.drawTrianglePath( context, [10, 60] ); 
context.stroke(); 

context .draw( ); 

// 绘制 肩 形 

_fn.drawSectorPath( context, [60, 10], 55, 0, 60 ); 
context ,SetStrokeStyle( 'black' ); 
context.setLinewidth( 5 ); 

context.setrFillstyle( 'gray' ); 

context.stroke(); 

context .fill(); 
context.draw( true ); 

// 绘制 二 次 贝 塞 尔 曲 线 
context.setLinewidth( 1 ); 


_fn.drawQuadraticCurve( context，[10，70]，[10，170]，[100，70] ); 
context.stroke(); 

context. draw( true ); 

// 绘制 三 次 贝 塞 尔 曲线 

_fn. DE 2 COV context, [110, 70], [i110, 150], [210, 150], [210, 70] ); 
context.stroke(); 

context.draw( true ); 


} 
} ); 
_fn={ 
// 绘制 三 角形 


drawTrianglePath : function( canvasContext, beginpos ) { 
canvasContext.moveTo( beginPos[6]，beginPos[1] ); 
// 开始 路 径 
canvasContext ,beginPath() ， 
// 绘制 3 条 边 
canvasContext.1lineTo( beginPos[0] + 30，beginPos[1] - 50 ); 
canvasContext.1lineTo( beginPos[0] + 60，beginPos[1] ); 
canvasContext.lineTo( beginPos[6]，beginPos[1] ); 
// 关闭 路 径 


canvasContext .closePath() ， 


}, 上 江上 ET] 
// 绘制 扇形 
drawSectorpPath : function( canvasContext, beginPos, radius, startAngle, endAngle 


) { 


canvasContext.moveTo( beginPos[6],beginPos[1] ); 

// 开始 路 径 

canvasContext .beginPath() ， 

canvasContext .1LineTo( beginPos[0] + radius，beginPos[1] ); // 绘制 边线 

canvasContext.arc( Peg ns ne beginpPos[1], radius, startAngle*Math.PI / 180, 
endAngle*Math.PI/180 ); // 绘制 弧 线 

canvasContext .1lineTo( beoinpos | ol beoirioeta ); // 绘制 边线 

// 开始 路 径 

canvasContext ,closePath() ， 


}, 
// 绘制 二 次 贝 塞 尔 曲线 路 径 
drawQuadraticCurve : function( canvasContext, startPoint, controlPoint, endPoint 


) { 


canvasContext .beginPath() ， 

canvasContext.moveTo(startPoint[0], startPoint[1]); 

canvasContext.quadraticCurveTo(controlPoint[0], controlPoint[1], endPoint[0], 
endPoint[1]); 

// 这 里 不 需要 关闭 路 径 ， 否 则 路 径 将 自动 首尾 相连 


】 
// 绘制 三 次 贝 塞 尔 曲 线路 径 
drawBezierCurve : function( canvasContext, startPoint, controlPoint1, 
controlPoint2, endPoint ) { 
canvasContext .beginPath() ， 
canvasContext.moveTo( startPoint[0], startPoint[1] ); 
canvasContext.bezierCurveTo(controlPoint1[0], controlpPoint1[1], 
SN controlPoint2[1], endPoint[0], endPoint[1]); 
// 这 里 不 需要 关闭 路 径 ， 否 则 路 径 将 自动 首尾 相连 
} 


} 


(6) 变形 


变形 相关 方法 会 整体 影响 之 后 绘图 方法 的 坐标 体系 ， 每 个 方法 之 
前 可 以 相互 迭代 ， 可 以 认为 变形 是 对 整体 坐标 体系 的 变形 。 变 形 相关 
方法 如 下 : 


.Scale (scaleWidth，scaleHeight) : 在 调用 scale 方 法 后 ， 之 后 创建 
的 路 径 其 横 纵 坐标 会 被 缩放 。 多 次 调用 scale， 倍 数 会 相 乘 。 缩 放 后 不 
仅 影 响 图 形 坐 标 ， 同 时 影响 线条 宽度 ， 可 认为 是 对 画布 整体 进行 了 缩 
放 。 参 数 说 明 如 下 : 


.ScaleWidth: 横 坐 标 缩放 的 倍数 (1=100%，0.5=50%， 
2=200%) 。 


'scaleHeight: 纵 坐 标 轴 缩放 的 倍数 (1=100%，0.5=50%， 
2=200%) 。 


Totate (rotate) : 以 原点 为 中 心 ， 原 点 可 以 用 translate 方 法 修改 。 
顺 时 针 旋 转 当前 坐标 轴 。 多 次 调用 rotate， 旋 转 的 角度 会 三 加 。 参 数 包 
括 rotate: 旋转 角度 ， 以 弧度 计 〈degrees*Math.PI180，degrees 范 围 为 0 
~360) 。 


translate (X，y) : 对 当前 坐标 系 的 原点 (0，0) 进行 变换 ， 默 认 
的 坐标 系 原点 为 页 面 左 上 角 。 参 数 说 明 如 下 : 


x 水平 坐标 平移 量 。 


y: 竖 直 坐标 平移 量 。 


本 太 示 例 中 多 种 变形 效果 可 相互 到 加 ， 示 例 代 码 如 下 ， 效 果 见 图 5- 
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图 5-8 ”变形 方法 示例 


style="width: 100%; height: 200px;" canvas-id="myCanvas"></canvas> 


bindtap="scale">4 


E 标 放大 2 倍 </button> 


bindtap="rotate"> 旋 转 30 度 </button> 


bindtap="translat 


e"> 原 点 坐标 x、y 均 加 16px</button> 


bindtap="drawReact"> 绘 制 正方 形 </button> 


Page( { 
canvasContext : null, 
onReady : function() { 
this.canvasContext = wx.createCanvasContext( 'myCanvas' ); 


}, 
translate : function() 
this.canvasContext ,translate( 106，10 ); // 横 纵 坐标 均 移 动 19px 


了 
rotate : function() 
this.canvasContext .rotate( 30 * Math.PI / 180 ); // 旋转 30 度 


}, 
Scale : function() { 
this.canvasContext.scale( 2，2 ); // x,y 均 放大 2 倍 ， 放 大 后 ， 线 条 也 相应 放大 


drawReact | function( ) { 
var context = this.canvasContext,; 
context.restore(); // 恢复 绘制 条 件 , 并 弹 栈 。 
context.rect( ©, 9, 15, 15 ); 
context. stroke(); 
context.draw( true ); // 基于 上 次 图 形 继续 绘制 


(7) 文字 


文字 相关 方法 能 将 文字 输出 到 画布 中 ， 字 体 颜 色 能 通过 setFillStyle 
() 方法 修改 ， 其 方法 包括 fllText (text，x，y) : 在 画布 上 绘制 被 填 
充 的 文本 。 参 数 说 明 如 下 : 


text: 在 画布 上 输出 的 文本 。 


X: 绘制 文本 的 左上 角 x 坐 标 位 置 。 


y: 绘制 文本 的 左上 角 y 坐 标 位 置 。 


:setFontSize (fontSize) : 设置 字体 的 字号 。 参 数 包 括 fontSize: 字 
体 的 字号 。 


示例 代码 如 下 ， 效 果 见 图 5-9: 


<canvas style="width: 100%; height: 200px;" canvas-id="myCanvas"></canvas> 


Page( { 
onReady : function() { 
Var context = wx.createCanvasContext( 'myCanvas' ); 


context .fillText(' 中 文 '，10,，20) 
// 设置 字体 大 小 
context.setFontSize( 24 ); 

// 改变 字体 颜色 
context.setFillstyle( 'red' ); 
context .fillText('English', 100, 20) 


context .draw( ); 
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图 5-9 字体 方法 示例 


图 片 方法 只 有 一 个 drawimage (imageResource, x, y，width, 


height) : 用 于 在 画布 上 绘制 图 片 。 方 法 如 下 : 


-imageResource: 所 要 绘制 的 图 片 资 源 ， 可 以 是 网 络 资源 ， 也 可 以 
是 本 地 资源 相对 路 径 。 


X: 图 像 左 上 角 的 x 坐标 。 

y: 图 像 左 上 角 的 y 坐 标 。 
width: 图 像 宽度 。 

height: 图像 高 度 。 

示例 代码 如 下 ， 效 果 见 图 5-10: 


<canvas style="width: 100%; height: 200px;" canvas-id="myCanvas"></canvas> 


Page( { 
onReady : function() { 
var context = wx.createCanvasContext( 'myCanvas' ); 
context. drawImage( 'http://www.qq1234. org/uploads/allimg/140526/ 
3_140526112044_2.jpg', 1, 1, 100, 131 ); 
context .draw( ); 


} 
} ); 
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图 5-10 ”图 片 方法 


(9) 混合 


混合 方法 只 有 一 个 setGlobalAlpha (alpha)” : 设置 全 局 画笔 透明 
度 。 参 数 包括 alpha: 透明 度 ，0 表 示 完 全 透明 ，1 表 示 完 全 不 透明 。 


示例 代码 如 下 ， 效 果 见 图 5-11: 


<canvas style="width: 100%; height: 300px;" canvas-id="myCanvas"></canvas> 


Page( { 
onReady : function() { 


Var context = wx.createCanvasContext( 'myCanvas' ); 


context.setFillstyle( 'blue' ); 

context.fillRect(10, 10, 100, 100); 

context.setGlobalAlpha( 0.5 ); 

context.fillRect(50, 50, 100, 100); 

// 对 图 片 也 生效 context.drawImage( 'http://www.qq1234.org/uploads/allimg/ 
140526/3_140526112044_2.jpg', 89, 80, 100, 131 ); 

context .draw( ); 


} 
} ); 
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图 5-11 混合 方法 示例 


其 余 一 些 方法 主要 涉及 绘画 步 又 和 绘制 方式 ， 涉 及 的 方法 如 下 : 


Save () : 保存 当前 的 绘图 上 下 文 ， 每 次 保存 类 似 将 当前 设置 进 
行 讨 栈 ， 可 以 用 于 保存 一 些 默认 设置 ， 需 要 注意 的 是 save () 方法 仅 用 
于 保存 当前 绘图 上 下 文 状态 ， 而 不 是 用 于 你 存 当 前 操作 步 又 


Testore () : 恢复 之 前 保存 的 绘图 上 下 文 。 


-draw (reserve) : 将 之 前 在 绘图 上 下 文中 的 描述 〈 路 径 、 变 形 、 
样式 ) 画 到 canvas 中 。 参 数 包 括 reserve: 非 必 填 ， 指 本 次 绘制 是 否 接着 
上 一 次 绘制 ， 即 reserve 参 数 为 false， 则 在 本 次 调用 drawCanvas 绘 制 之 前 
native 层 应 先 消 空 男 布 再 继续 绘制 ， 奉 reserver 参 数 为 ttue， 则 保留 当前 
画布 上 的 内 容 ， 本 次 调用 drawCanvas 绘 制 的 内 容 覆 盖 在 上 面 ， 默 认为 


false。 
示例 代码 如 下 ， 鸡 果 见 图 5-12: 


<canvas style="width: 100%; height: 300px;" canvas-id="myCanvas"></canvas> 


Page( { 
onReady : function() 
var context = wx.createCanvasContext( 'myCanvas' ); 


context.setrFillSstyle( 'red' ); 
context .savel(); 

context.setFillstyle( 'blue' ); 
context. fillRect( 10, 10, 100, 100 ); 
// 恢复 到 之 前 红色 设 
context. ctor). 


context.fillRect( 120, 10, 100, 100 ); 
context .draw( ); 


— 
~ 
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图 5-12 ”其 他 方法 示例 


5.7.6 下拉 刷 新 


下 拉 刷 新 API 包 括 : 


-onPullDownRefresh (callback) 监听 下 拉 刷 新 事件 需要 在 Page 中 
定义 onPull-DownRefresh 处 理 函 数 。 监 听 下 拉 事 件 时 需要 在 app.json 配 
置 中 开启 window 配 置 的 enablePullDownRefresh 选 项 。 当 处 理 完 数据 刷 
新 后 ， 可 以 调用 wx.stopPull-DownRefresh 方 法 停止 当前 页 面 的 下 拉 刷 
新 。 


-WX.stopPullDownRefresh () 停止 当前 页 面 下 拉 刷 新 。 
示例 代码 如 下 : 


Page( { 
// 监听 当前 页 面 下 拉 刷 新 
NA : function() { 
// 停止 当前 页 面 下 拉 刷 新 
WX ， Se ii 


} ); 


5.8 开放 接口 


考虑 到 小 程序 的 登录 和 文 付 相对 难 理解 ， 在 第 8 章 我 们 特意 整理 一 
个 打 赏 App， 以 展示 在 项 目 中 如 何 使 用 登录 、 文 付 相关 API。 


5.8.1 登录 
在 小 程序 中 ， 登 录 分 2 步 ， 第 一 步 需 要 获取 登录 凭证 ， 第 二 步 用 登 
言 息 可 用 于 后 续 支 付 等 流程 。 


录 任 证 获取 用 户 登 录 仿 信息 ， 登 录 仿 信 


DN, 


1.wx.login (Object) 

调用 接口 获取 登录 凭证 (code) 进而 换取 用 户 登 录 仿 信息 ， 包 括 
用 户 唯 一 表示 (openid) 及 本 次 登录 的 会 话 密 钥 (session_key) ， 用 
户 数 据 的 加 解密 通信 需要 依赖 会 话 密 钥 完成 ，Object 参 数 属性 如 下 : 
返回 参数 如 下 : 


.Success: 接口 调用 成 功 的 回调 函数 ， 


'errMSsg: 调用 结 
code: 用 户 允 许 登 录 后 ， 回 调 内 容 会 带 上 code 《有效 期 五 分 
钟 ) ， 开 发 者 需要 将 code 发 送 到 开发 者 服务 器 后 台 ， 使 用 code 换 取 


session_key API， 将 code 换 成 openid 和 session_key 。 


:fail: 接口 调用 失败 的 回调 函数 。 
-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


示例 如 下 : 


wx.login( { 
success : function( res ) { 
if ( !res.code ) { 
return; 


} 
// 这 里 建议 调用 后 台 接 口 进行 登录 态 转换 、 保 存 工 作 
wx.request({ 
url : 'https://myserver.com/login', 
data : { 
code : res.code 


Success function( loginInfo ) { 
console.1og( ' 登 录 成 功 ' )，; 


} 
}); 
} ); 


2.code 换 取 session_key， 获 取 用 户 信息 


调用 wx.login () 获取 code 后 我 们 需要 在 5 分 钟 内 用 code 换 取 
session_key、openid 等 用 户 信息 ， 为 此 官方 暴露 了 一 个 HTTP 接 口 ， 尽 
管 我 们 可 以 直接 通过 wx.request () 调用 接口 ， 获 取 用 户 信息 ， 但 是 由 
于 session_key 是 对 用 户 数据 进行 加 密 签 名 的 密 铀 ， 为 了 上 自身 应 用 安 
全 ， 尽 量 使 用 后 台 服 务 器 调用 这 个 接口 ， 保 存 登录 信息 ， 返 回 给 小 程 
序 前 台 ， 接 口 地 址 如 下 : https://api.weixin.qq.com/sns/jscode2session? 


appid=APPID&secret=SECRET&js_code=JSCODE&grant_ type=authoriza 


tion_code 


接口 请 求 参数 : 


-appid: 小 程序 唯一 标识 ， 在 开发 者 后 台 “ 设 置 ~ 开 发 设置 "中 可 找 
ol 


“secret: 小 程序 的 app secret， 在 开发 者 后 台 * 设 置 - 开 发 设置 ?中 可 
找到 。 


.js_code: 调用 wx.login () 登录 时 获取 的 code。 


.grant_type: 填写 为 “authorization_code”。 


-openid: 用 户 唯 一 标识 。 

“session_key: 会 话 密 钥 。 

.expires_in: 会 话 有 歼 期 ， 以 秒 为 单位 ， 例 如 2592000 代 表 会 话 有 
效 期 为 30 天 。 


返回 值 示 例如 下 : 


// 正 常 返回 的 JSON 数 据 包 


"openid": "OPENID", 
"session_ key": "SESSIONKEY" 
"expires_in"; 2592000 


// 错 误 时 返回 JSON 数 据 包 ( 示 例 为 Code 无 效 ) 


"errcode": 40029, 
"errmsg": "invalid code" 


3. 登 录 态 维护 


开发 中 ， 每 个 项 目 应 该 利用 后 人 台 目 己 维 护 登 录 态 ， 不 能 直接 把 
seeion_key、openid 等 字段 作为 用 户 的 标识 或 者 session 的 标识 ， 具 体 使 
用 场景 可 参考 第 8 章 。 


4.wx.checkSession (Object) 
检查 登录 人 态 是 否 过 期 ，Object 参 数 属性 如 下 : 
success: 接口 调用 成 功 的 回调 函数 ， 登 孙 态 未 过 期 。 


-fail: 接口 调用 失败 的 回调 函数 ， 登 示 态 已 过 期 。 


1 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 如 下 : 


wx.checkSession({ 
success: function(){ 
// 登 录 态 未 过 期 


}, 
fail: function(){ 
// 登 录 态 过 期 


} 
}) 


5.8.2 ”用户 信息 


wx.getUserInfo 《Object) 


获取 用 户 信息 ， 需 要 首先 调用 wx.login 接 口 ，Object 参 数 属性 如 


.Success: 接口 调用 成 功 的 回调 函数 ，success 返 回 参数 属性 如 下 : 
-userInfo: 用 户 信 息 对 象 ， 不 包含 openid 等 敏感 信息 。 
:rawData: 不 包含 敏感 信息 的 原始 数据 字符 串 ， 用 于 计算 签名 。 


"signature: 使 用 shal (rawDatatsessionkey) 得 到 的 字符 串 ， 用 于 
校 验 用 户 信息 。 


-encryptData: 包括 敏感 数据 在 内 的 完整 用 户 信息 的 加 密 数 据 。 
iv: 加 密 算法 的 初始 向 量 。 
fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 


WX,getUserInfo({ 
success : function( res ) { 
console.1og( res ); // 打印 出 用 户 信息 
} 
}); 


对 encryptedData 解 密 后 可 得 到 完整 的 用 户 信息 ， 解 密 算法 可 参考 
https://mp.weixin.qq.com/debug/wxadoc/dev/api/signature.htm] ， 解 压 后 
的 结构 如 下 : 


"openId": "OPENID", 
"nickName": "NICKNAME", 
"gender": GENDER, 

"city": CITY 

,province ; "PROVINCE" 
"country": "COUNTRY. 
"avatarUrl": "AVATARURL" 2 
"unionId": WUNTONTD 
"watermark": 


"appid":"APPID", 
"timestamp" :TIMESTAMP 
} 


其 中 unionId 用 于 区 分 不 同 应 用 下 的 用 户 身 份 ， 它 在 同一 个 微 信 开 
放 平 台 账号 下 的 移动 应 用 、 网 站 应 用 和 公共 账号 (包括 小 程序 ) 是 全 
局 唯一 的 ， 而 openId 只 在 同一 应 用 体系 中 是 唯一 的 ， 即 在 不 同 公共 号 
下 的 openId 可 能 重复 ， 但 unionId 不 会 重复 。 即 同一 用 户 ， 对 同一 个 微 
信 开 放 平 台 下 的 不 同 应 用 ， 登 录 后 unionId 是 相同 的 ，openId 是 不 相同 
的 。 获 取 unionId 首 先 需 要 将 小 程序 接 入 微 信 开放 平台 ， 开 发 者 可 以 登 
录 微 信 开 放 平 台 (open.weixin.qq.com) ， 进 入 “管理 中 心 -> 公众 账号 -> 


绑 定 公众 帐号 >， 添加 账号 。 如 果 是 第 一 次 添加 需要 登 孙 微 信 开发 者 平 
人 台 ， 进 入 “账号 中 心 -> 开发 者 资质 认证 >， 完 成 开发 者 资质 认证 。 


5.8.3 ” 微 信 文 付 


本 下 只 做 简单 的 API 讲 解 ， 文 付 具体 使 用 方式 可 参考 打 赏 App。 
wx.requestPayment (Object) ; 


用 于 发 起 微 信 支 付 ， 关 于 文 付 可 参考 打 和 党 App，Object 参 数 属性 如 
下 : 


-timestamp: 时 间 惟 ， 从 1970 年 1 月 1 日 00: 00: 00 至 今 的 秒 数 ， 即 
当前 的 时 间 。 


-nonceStr: 随机 字符 串 ， 长 度 为 32 个 字符 以 下 。 


:package: 统一 下 单 接口 返回 的 prepay_id 参 数值 ， 提 交 格 式 如 : 


prepay_id=* 。 
signType: 签名 算法 ， 暂 文 持 MD5 。 
.paySign: 签名 。 
success: 接口 调用 成 功 的 回调 函数 。 


-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 和 失败 都 会 执 


示例 代码 如 下 : 


WwWX,requeSstPayment( { 
'timeStamp' : '', 
'noncestr' :; "' 


} ); 


5.8.4 模板 消息 


对 于 使 用 过 微 信 的 用 户 来 讲 模 板 消 息 一 点 也 不 陌生 ， 最 篆 见 的 就 
征 通过 微 信 文 付 后 ， 微 信 文 付 推送 的 文 付 消 轧 就 是 模板 消息 。 在 小 程 
序 中 我 们 也 能 使 用 模板 消息 给 用 户 推 送信 息 。 需 要 注意 的 是 只 有 微 信 
6.5.2 及 以 上 版 本 能 支持 模板 功能 ， 低 于 该 版 本 将 无 法 收 到 模板 消息 。 


1. 调 用 模板 消 妃 接口 


发 送 模板 信息 需要 通过 POST 方式 调用 微 信 后 台 接口 ， 接 口 调用 可 
以 是 前 台 调 用 ， 也 可 以 是 后 台 调 用 ， 接 口 地 址 为 : 


https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send? 


access_ token=ACCESS_TOKEN 
post 参 数 如 下 : 


-touser: 接收 者 (用 户 ) 的 openid， 通 常 是 当前 使 用 者 的 openid， 
必 填 项 。 


-template_id: 所 需 下 发 的 模板 消息 的 id， 必 填 项 。 


:page: 点 击 模板 卡片 后 的 跳 转 页 面 ， 仅 限 本 小 程序 内 的 页 面 。 文 
持 带 参数 ， (示例 index? foo=bar) 。 该 字段 不 填 则 模板 无 跳 转 。 


-form_id: 表单 提交 场景 下 ， 为 submit 事 件 带 上 的 formId; 支付 场 
景 下 ， 为 本 次 文 付 的 prepay_id， 必 填 项 。 


-data: 模板 内 容 ， 不 填 则 下 发 空 模板 ，data 中 keyword 对 应 模板 


keyword， 必 填 项 。 
:color: 模板 内 容 字 体 的 闫 色 ， 不 填 上 默认 黑色 。 


-emphasis_keyword: 模板 需要 放大 的 关键 词 ， 不 填 则 默认 无 放 
SN o 


示例 代码 如 下 : 


"touser": "OPENID", 
"template_id": "TEMPLATE_ID", 
"page": "index" 


"form_ id": "FORMID", 
"data": { 
"keyword1": { 
"value":;" 著 片 


1 
A 
"color": "#173177" 


}, 

"keyword2": { 
"value": "2015 年 01 月 05 日 12:30",， 
"color": "#173177" 


} 
}, 
"emphasis_ keyword": "keyword1.DATA" 


接口 返回 数据 : 


{"errcode": 0,"errmsg": "ok"} 


返回 数据 中 常见 销 误 码 有 : 


40037: 


41028: 


“41029: 


41030: 


“45009: 


template_id 不 正确 。 
form_id 不 正确 ， 或 者 过 期 。 
form_id 已 被 使 用 。 
page 不 正确 。 


接口 调用 超过 限额 (目前 默认 每 个 帐号 日 调用 限额 为 100 


调用 模板 消息 时 有 几 个 参数 非常 关键 ， 分 别 是 : access_token 


口 url 参 数 ) 
ei o 


( 接 
，form_id，template_ id 和 data。 接 下 来 我 们 一 一 分 析 这 些 参 


(1) template_ id 和 data 


template_id 是 需要 调用 模板 的 id，data 为 当前 模板 所 需要 的 数据 ， 
小 程序 所 有 模板 都 在 微 信 公共 平台 (https://mp.weixin.qq.com/ ) -> 模板 
消息 进行 管理 ，template_id 可 在 模板 管理 界面 中 直接 复制 ， 如 图 5-13 所 


人 小? 


还 可 沃 j024 个 


模板 ID 


物品 名 称 、 付 获 时 间 jUnzZ_AOFNK2QLcGnQ8S9RncybC3XWwxt_..。 复制 


图 5-13 ”获取 template_id 


没有 模板 时 可 以 创建 一 个 新 模板 ， 微 信 定制 了 多 种 类 型 的 模板 ， 
每 个 模板 可 以 选取 需要 填写 哪些 key 值 ， 这 些 key 值 会 根据 请 求 参数 data 
属性 进行 填写 ， 选 取 好 后 会 生成 相应 的 模板 如 图 5-14 所 示 。 


ijiUnZ_AOFNK2QI7cGnQ8S9RncybC3XWvxt JO4Z5jFhw 复制 
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付款 成 功 通知 
es 物品 名 称 | {{keyword1.DATA} 
付款 时 间 | {{keyword2.DATA}} 


付款 成 功 通 知 


物品 名 称 。 果汁 
付款 时 间 ”2016 年 9 月 9 日 


图 5-14 模板 详情 


当前 模板 按 上 文 示例 代码 请 求 数据 会 给 用 户 推送 一 条 物品 名 称 
为 “ 葛 片 >”， 付 款 时 间 为 “2015 年 01 月 05 日 12: 30” 的 付款 成 功 通知 消息 。 


(2) form id 


form_ id 的 值 由 页 面 <form/> 组 件 submit 方 法 生成 ， 获 取 时 需要 将 
<form/> 的 report-submit 属 性 值 为 tue， 此 时 点 击 提交 按钮 触发 submit 事 
件 时 ， 可 通过 参数 获取 。 


示例 代码 如 下 : 


<form report-submit bindsubmit="submit"> 
<button form-type="submit"> 提 交 </button> 
</form> 


Page( { 
submit : function( e ) { 
console.log( e.detail.formId ); 


} 
} ); 


当 用 户 完 成 支付 行为 时 ，form_id 的 值 应 为 统一 下 单 接 口 返 回 的 
prepay_id ° 


(3) access token 


access_token 是 全 局 唯一 的 接口 调用 赁 证， 调用 很 多 接口 都 需要 使 
用 access_token。access_token 存 储 至 少 需要 512 个 字符 空间 ， 获 取 
access_token 需 要 通过 get 方 式 调用 微 信 后 台 接 口 : 


https://api.weixin.qq.com/cgi-bin/token? 


grant_type=client_credential&appid=APPID&secret=APPSECRET 


其 参数 如 下 : 


.grant_type: 接口 类 型 ， 获 取 access_token 时 填写 client_credential , 
必 填 项 。 


.appid: 第 三 方 用 户 唯 一 赁 证 ， 即 小 程序 appid， 可 在 微 信 公共 平台 
官网 -> 设置 -> 开发 设置 中 获取 ， 必 填 项 。 


“secret: 第 三 方 用 户 唯 一 开 证 密 铀 ， 即 appsecret， 可 在 微 信 公共 平 
台 官 网 -> 设置 -> 开发 设置 中 获取 ， 必 填 项 。 


正 利 情况 下 ， 微 信 会 返回 如 下 JSON 数 据 : 
{"access_token": "ACCESS_TOKEN"， "expires_in": 7200} 


返回 数据 中 expires_in 指 凭证 有 效 时 间 ， 单 位 秒 。 由 此 可 看 出 
access_token 有 效 时 间 为 2 小 时 ， 失 效 后 需要 定时 刷新 ， 重 复 刷 新 将 导致 
上 次 获取 的 access_token 失 效 ， 同 时 access_token 有 失效 时 间 而 且 每 天 调 
用 接口 次 数 有 限制 ， 如 果 每 个 服务 (或 小 程序 客户 端 ) 单独 调用 接口 
获取 access_token 将 会 导致 access_token 不 一 致 ， 产 生 剖 突 ， 导 致 服务 不 
稳定 ， 所 以 我 们 通常 利用 中 控 服 务 句 单独 维护 access_token， 系 统 所 有 
服务 都 依赖 这 个 服务 获取 access_token， 这 样 能 保证 access_token 的 一 致 
性 和 有 效 生 命 周 期 ， 获 取 access_token 方 式 如 下 : 


:为 了 保密 appsecrect， 第 三 方 需要 一 个 access_token 获 取 和 刷新 的 中 
探 服 务 右 。 而 其 他 业务 逻辑 服务 器 所 使 用 的 access_token 均 来 和 目 于 该 中 


控 服 务 器 ， 不 应 该 各 和 目 去 刷新 ， 否 则 会 造成 access_token 覆 盖 而 影响 业 
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:目前 access_token 的 有 效 期 通过 返回 的 expires_in 来 传达 ， 目 前 是 
7200 秒 之 内 的 值 。 中 控 服 务 器 需要 根据 这 个 有 效 时 间 提 前 去 刷新 新 
access_token。 在 刷新 过 程 中 ， 中 控 服 务 器 对 外 输出 的 依然 是 老 
access_token， 此 时 公众 平台 后 人 台 会 保证 在 刷新 短 时 间 内 ， 新 老 
access_token 都 可 用 ， 这 保证 了 第 三 方 业 务 的 平滑 过 渡 ; 


access_token 的 有 效 时 间 可 能 会 在 未 来 有 调整 ， 所 以 中 欣 服 务 器 不 
仅 需 要 内 部 定时 主动 刷新 ， 还 需要 提供 被 动 刷 新 access_token 的 接口 ， 
这 样 便 于 业务 服务 侣 在 API 调 用 获知 access_token 已 超时 的 情况 下 ， 可 
以 触发 access_token 的 刷新 流程 。 


2. 下 发 条 件 


调用 模板 信息 需要 满足 一 些 相 应 条 件 ， 按 类 型 可 将 这 些 条 件 分 为 
文 付 和 提交 表单 : 


文 付 当 用 户 在 小 程序 内 完成 过 支付 行为 ， 可 允许 开发 者 向 用 户 在 7 
天 内 推送 有 限 条 数 的 模板 消息 〈1 次 文 付 可 下 发 1 条 ， 多 次 文 付 下 发 条 
数 独立 ， 互 相 不 影响 ) 。 


-提交 表单 当 用 户 在 小 程序 内 发 生 过 提交 表单 行为 且 该 表单 声明 为 
要 发 模板 消 轧 的 ， 开 发 者 需要 癌 用 户 提 供 服 务 时 ， 可 人 允许 开发 者 向 用 
户 在 7 天 内 推送 有 限 条 数 的 模板 消息 (1 次 提交 表单 可 下 发 1 条 ， 多 次 拓 
交 下 发 条 数 独立 ， 相 互 不 影响 ) 。 


3. 模 板 管理 规则 


(1) 模板 审核 


新 建 的 模板 需要 通过 审核 才能 使 用 ， 审 核 规则 如 下 : 


标题 : 


1) 标题 不 能 存在 相同 。 


2) 标题 意思 不 能 存在 过 度 相 似 。 


3) 标题 必须 以 “提醒 ”或 “通知 ”结尾 。 


St 


4) 标题 不 能 市 特殊 符号 、 个 性 化 字 词 等 没有 行业 通用 性 的 内 容 。 


5) 标题 必须 能 体现 具体 服务 场景 。 


6) 标题 不 能 涉及 营销 相关 内 容 ， 包 括 不 限于 : 消费 优惠 类 、 购 物 
返利 类 、 商 品 更 新 类 、 优 惠 券 类 、 代 金 券 类 、 红 包 类 、 会 员 卡 类 、 积 
分 类 、 活 动 类 等 各 销 倾 问 通 知 。 


天 键 词 : 


同一 标题 下 ， 关 键 词 不 能 存在 相同 。 


天 一 
Msi 


同一 标题 下 ， 关 键 词 不 能 存在 过 度 相 似 。 


[BS 
a 


天 键 词 不 能 市 特殊 符号 、 个 性 化 字 词 等 没有 行业 通用 性 的 内 


CD 
Sg 


驴 


天 键 词 内 容 示 例 必 须 与 关键 词 对 应 匹配 。 


关键 词 不 能 太 过 宽 江 ， 需 要 具有 限制 性 ， 例 如 : “内 容 * 这 个 就 
太 宽 沁 ， 不 能 审核 通过 。 


Ul 
epee 


(2) 违规 说 明 


除 不 能 违反 运 襄 规范 外 ， 还 不 能 违反 以 下 规则 ， 包 括 但 不 限于 : 


1) 不 允许 恶意 诱导 用 户 进行 触发 操作 ， 以 达到 可 向 用 户 下 发 模板 


2) 不 允许 恶意 骚扰 ， 下 发 对 用 户 造 成 又 扰 的 模板 。 


3) 不 允许 恶意 营销 ， 下 发 膏 销 目的 模板 。 


4) 不 允许 通过 服务 号 下 发 模板 来 告知 用 户 在 小 程序 内 触发 的 服务 
相关 内 容 处 罚 说 明 。 


(3) 处 如 说 明 


根据 违规 情况 给 予 相应 梯度 的 处 加 ， 一 般 处 昼 规 则 如 下 : 


1) 第 一 次 违规 ， 删 除 违 规模 板 以 示警 告 ， 


2) 第 二 次 违规 ， 封 禁 接口 7 天 。 


3) 第 三 次 违规 ， 封 禁 接口 30 天 。 


4) 第 四 次 违规 ， 永 久 封禁 接 口 。 


处 昼 结 果 及 原因 以 站 内 信 形 式 千 知 。 


5.8.5 客服 消息 


在 小 程序 中 ， 通 过 点 击 <contact-button/> 可 以 进入 客服 会 话 系统 。 
和 会 话 系 统 中 ， 用 户 发 送 的 信息 (或 进行 某 些 特定 的 用 户 操作 引发 的 
事件 推送 ) ， 微 信服 务 器 会 将 消息 (或 事件 ) 的 数据 包 以 POST 方式 传 
递 给 开发 者 填写 的 URL。 当 开发 者 服务 器 接受 到 信息 后 ， 可 以 使 用 发 
送 服务 消息 接口 进行 异步 回复 ， 这 两 个 行为 分 别 是 2 个 不 同 的 请 求 。 基 
于 这 个 特性 ， 可 以 自己 研发 或 接 入 任何 客服 系统 。 


1. 接 入 指引 
接 入 微 信 小 程序 消息 服务 ， 整 体 需 要 2 步 : 
1) 填写 开发 者 服务 器 配置 。 


2) 开发 者 服务 器 接受 请 求 并 返回 指定 信息 ， 验 证 服务 器 地 址 有 效 


(1) 填写 服务 器 配置 


登录 微 信 公众 平台 ， 在 “设置 -> 消息 推送 ”中 启动 消息 服务 ， 如 图 5- 
15 所 示 。 在 配置 页 面 填写 URL、Token 和 EncodingAESKey。 其 中 URL 是 
开发 者 服务 端 接收 消息 的 接口 URL 地 址 ， 必 须 是 http:/ 或 https:/ 开 头 ， 
分 别 文 持 80 和 443 端 口 。Token 为 用 户 号 份 令 牌 用 作 生 成 签名 ， 可 由 开 


发 者 任意 填写 ， 该 Token 会 和 接口 URL 中 包含 的 Token 进 行 对 比 ， 从 而 
验证 安全 性 。EncodingAESKey 由 开发 者 手动 填写 或 随机 生成 ， 用 作 消 
息 体 加 解密 密 钥 。 在 配置 界面 中 可 以 选择 消息 加 密 方式 和 数据 格式 ， 

加 密 方式 默认 为 明文 ， 数 据 格式 默认 为 XML。 消 息 加 密 解 密 可 参考 
https://open.weixin.qq.com/cgi-bin/showdocument? 
action=dir_list&t=resource/res_list&verify=1&id=open1419318479&token= 


&lang=zh_CN 。 


消息 推送 配置 


填写 的 URL 震 要 正确 响应 微 信 发 送 的 Token 验 证 ， 壤 写 说明 请 阅读 消息 推送 服务 器 配置 指南 


URL( 服 务 露 地 址 ) 


必须 以 http:// 或 https:// 开 头 ， 分 别 支 持 80 洲 口 和 443 端 口 


Token( 令 牌 ) 


必须 为 英文 或 数字 , 长度 为 3-32 字 符 


EncodingAESKey 0/43 随机 生成 
(消息 加 客 客 钥 ) 


消息 加 客 客 铀 由 43 位 字符 组 成 ， 闻 符 范 围 为 A-Z.a-z0-9 
消息 加 密 方 式 请 根据 业务 需要 , 选择 消息 加 密 方 式 ， 启 用 后 将 立即 生效 
9 明文 模式 (不 使 用 消息 体 加 和 解 宅 功能 ,安全 系数 较 低 ) 
兼容 模式 (明文 、 密 文 格 共 存 ,方便 开发 者 调试 和 维护 ) 


2 安全 模式 ( 推荐 ) 。 (消息 包 为 纯 客 文 ， 和 需要 开发 者 加 客 和 解 
密 , 安全 系数 育 ) 


请 选择 微 信 与 开发 者 服务 露 间 传 输 的 数据 格式 
) JSON ® XML 


图 5-15 ”配置 界面 


(2) 验证 服务 器 地 址 有 效 性 


仅仅 填写 配置 信息 是 不 能 完成 返 入 的 ， 提 交配 置信 息 后 ， 微 信服 
务 占 将 发 送 GET 请 求 到 填写 的 服务 占 地 址 ， 开 发 者 服务 占 收 到 请 求 并 
按 要 求 返 回 才 能 完成 拔 入 ， 所 以 我 们 在 配置 前 移 完 成 后 全 服务 郁 接 口 
工作 ，GET 请 求 参数 如 下 : 


signatrue: 微 信 加 密 签 名 ，signature 结 合 了 开发 者 填写 的 token 参 数 
和 请 求 中 的 timestamp 参 数 、nonce 参 数 。 


-timestamp: 时间 鹤 。 
:nonce: 随机 数 。 
:echostr: 随机 字符 串 。 


后 台 可 通过 检验 signature 验 证 请 求 。 收 到 GET 请 求 后 ， 开 发 者 服务 
器 需要 原样 返回 echostr 参 数 内 容 ， 才 能 接 入 生效 。 加 密 / 校 验 流 程 如 
下 : 


1) 将 token、timestamp、nonce 三 个 参数 进行 字典 序 排序 


2) 将 三 个 参数 字符 串 拼接 成 一 个 字符 串 进 行 shal 加 密 。 


3) 开发 者 获得 加 密 后 的 字符 串 可 与 signature 对 比 ， 标 识 该 请 求 来 
源 于 微 信 。 


检验 signature 的 PHP 代 码 示 例如 下 : 


private function checkSignature( ) 


$signature = $ GET["signature"]; 
$timestamp = $_GET["timestamp"]; 
$nonce = $_GET["nonce"]; 


$token = TOKEN; 

$tmpArr = array ($token, $timestamp, $nonce); 
sort($tmpArr, SORT_STRING); 

$tmpStr = implode( $tmpArr ); 

$tmpStr = shai( $tmpStr ); 


if( $tmpStr == $signature ){ 
return true; 

}elsef 
return false,; 


完成 URL 有 效 性 验证 后 便 接 入 生效 。 通 过 配置 URL 接 口 ， 开 发 者 
服务 器 可 接受 微 信 服务 器 推送 过 来 的 消息 和 事件 ， 并 根据 业务 进行 响 
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局 ， 


2. 接 受 消 思 和 事件 


当 点 击 <contact-button/> 时 便 进 入 了 客服 会 话 状态 ， 在 会 话 状态 中 
开发 者 服务 器 接收 信息 和 发 送信 息 是 2 个 不 同 接口 。 当 用 户 在 客服 会 话 
中 发 送 消息 〈 或 进行 某 些 特定 的 用 户 操 作 行为 引发 的 事件 ) ， 微 信服 
务 器 会 将 消息 (或 事件 ) 的 数据 包 (JSON 或 XML 格式 ) 以 POST 方式 
发 送 到 开发 者 填写 的 URL 。 


接收 到 信息 后 开发 者 服务 硕 必 须 做 出 下 述 回复 ， 告 知 微 信 服务 郁 
我 方 服务 右 已 成 功 接 收 信息 : 


1) 直接 回复 success (推荐 方式 ) 。 


2) 直接 回复 空 串 ( 指 字 市 长 度 为 0 的 空 字 符 串 ， 而 不 是 结构 体 中 


TPR 


content 字 段 的 内 容 为 空 ) 。 


微 信服 务 器 在 5 秒 内 收 不 到 任何 响应 会 断 掉 连接 ， 并 重新 发 起 请 
求 ， 总 共 重 试 3 次 ， 如 琳 在 调试 中 ， 发 现 用 户 无 法 收 到 啊 应 的 消 乱 ， 可 
以 检查 是 否 消息 处 理 超时 。 关 于 重 试 的 消息 排 重 ， 有 msgid 的 消息 推荐 
使 用 msgid 排 重 。 事 件 类 型 消息 推 存 使 用 FromUserName+CreateTime 排 
重 。 一 旦 遇 到 以 下 情况 ， 微 信 都 会 在 小 程序 会 话 中 ， 向 用 户 发 出 系统 
提示 “该 小 程序 客服 暂时 无 法 提供 服务 ， 请 稍 后 再 试 ”: 


1) 开发 者 在 5 秒 内 未 回复 任何 内 容 。 


2) 开发 首 回 复 了 异 肖 数据 。 


如 有 果 硕 望 增加 消息 安全 性 ， 可 以 在 消息 配置 中 开局 消息 加 密 功 
， 用 户 发 给 小 程序 的 消息 以 及 小 程序 被 动 回复 用 户 消 息 都 会 继续 加 
密 。 接 收 的 消 有 息 按 类 型 可 划分 为 3 类 : 进入 会 话 事件 、 文 本 消 轧 、 图 片 
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(1 注入 例证 定 作 


当 用 户 点 击 小 程序 “客服 会 话 按钮 ?进入 客服 会 话 时 将 产生 如 下 数 
据 包 : 


XML 格式 : 


<xml1> 
<ToUserName><![CDATA[toUser]]></ToUserName> 
<FromUserName><![CDATA[fromUser]]></FromUserName> 
<CreateTime>1482048670</CreateTime> 
<MsgType><![CDATA[event]]></MsgType> 
<Event><![CDATA[Uuser_enter_tempsession]]></Event> 
<SessionFrom><![CDATA[sessionFrom]]></SessionFrom> 

</xml1> 


JSON 格 式 : 


"ToUserName": "toUser", 
"FromUserName": "fromUser", 
"CreateTime": 1482048670, 
"MsgType": "event", 

"Event": "user_enter_tempsession", 
"SessionFrom": "sessionFrom" 


字段 说 明 如 下 : 

:ToUserName: 小 程序 的 原始 ID。 
:FromUserName: 发 送 者 的 openid。 
CreateTime: 事件 创建 时 间 〈 整 型 ) 。 
'MSsgType: event。 


:Event: 事件 类 型 ，user_enter_tempsession 。 


“SessionFrom: 开发 者 在 客服 会 话 按钮 设置 的 sessionFrom 人 参数 。 
(2) 文本 消息 

用 户 在 客服 会 话 中 发 送 文 本 消息 时 将 产生 如 下 数据 包 : 

XML 格式 : 


<xml> 
<ToUserName><![CDATA[toUser]]></ToUserName> 
<FromUserName><![CDATA[fromUser]]></FromUserName> 
<CreateTime>1482048670</CreateTime> 
<MsgType><![CDATA[text]]></MsgType> 
<Content><![CDATA[this is a test]]></Content> 
<MsgId>1234567890123456</MsgId> 

</xml> 


JSON 格 式 : 


"ToUserName": "toUser", 
"FromUserName": "fromUser", 
"CreateTime": 1482048670, 
"MsgType": "text", 
"Content": "this is a test", 
"MsgId": 1234567890123456 


字段 说 明 如 下 : 
“ToUserName: 小 程序 的 原始 ID 。 
:FromUserName: 发 送 者 的 openid 。 


:CreateTime: 消息 创建 时 间 〈 整 型 ) 。 


‘MsgTlype: text。 

-Content: 文本 消息 内 容 。 
.MsgId: 消息 id，64 位 整 型 。 

(3) 图 片 消 筷 

用 户 在 客服 会 话 中 发 送 图 片 消 息 时 将 产生 如 下 数据 包 .: 
XML 格式 ; 


<xml1> 
<ToUserName><![CDATA[toUser]]></ToUserName> 
<FromUserName><![CDATA[fromUser]]></FromUserName> 
<CreateTime>1482048670</CreateTime> 
<MsgType><![CDATA[image]]></MsgType> 
<PicUrl><![CDATA[this is a url]]></PicUrl> 
<MediaId><![CDATA[media id]]></MediaId> 
<MsgId>1234567890123456</MsgId> 

</XmJ> 


JSON 格 式 : 


"ToUserName": "toUser", 
"FromUserName": "fromUser", 
"CreateTime": 1482048670, 
"MsgType": "image", 
"PicUrl": "this is a url", 
"MediaId": "media id", 
"MsgId": 1234567890123456 


字段 说 明 如 下 : 


.TIoUserName: 小 程序 的 原始 ID 。 


:FromUserName: 发 送 者 的 openid。 
CreateTime: 消息 创建 时 间 〈 整 型 ) 。 
‘Msglype: text。 

PicUrl: 图 片 链接 (由 系统 生成 ) 。 


Mediald: 图 片 消 居 媒 体 id， 可 以 调用 获取 临时 素材 接口 拉 取 数 
据 。 


.MsgId: 消息 id，64 位 整 型 。 
3. 发 送 消息 


开发 者 在 接收 到 微 信 服务 器 消息 后 ， 在 一 段 时 间 内 (目前 修改 为 
48 小 时 ) 可 以 调用 客服 接口 ， 通 过 POST 一 个 JSON 数 据 包 来 给 用 户 发 送 
消息 。 此 接口 主要 用 户 客 服 等 有 人 工 消息 处 理 环节 ， 方 便 开 发 者 为 用 
户 提供 更 优质 的 服务 。 


目前 允许 的 动作 列表 如 下 ， 不 同 动作 触发 后 ， 人 允许 的 客服 接口 下 
发 消 妃 条 数 和 下 发 时 限 不 同 。 下 发 条 数 达 到 上 限 后 ， 会 收 到 销 误 返回 
码 ， 具 体 请 见 返 回 码 说 明 页 : 


用 户 动作 允许 下 发 条 数 限制 
通过 客服 消息 按钮 进入 会 话 | 1 条 


用 户 发 送信 息 


1 分 名 


3 条 


发 送 消 息 直 接 通 过 POST 方式 调用 一 下 接口 即 可 : 


https://api.weixin.qq.com/cgi-bin/message/custom/send? 


access token=ACCESS_TOKEN 
消息 JSON 数 据 格式 如 下 : 


文本 消息 : 


"touser":"OPENID", 
"msgtype":"text", 
"text": 


"content":"Hello world" 


图 片 消 筷 : 


{ 
"touser":"OPENID", 
"msgtype":"image", 
"image": 


"media_id":"MEDIA_ID" 


字段 说 明 如 下 : 
access_token: 调用 接口 凭证 ， 必 填 项 。 
-touser: 普通 用 户 openid， 必 填 项 。 


-msgtype: 消 忌 类型， 文本 为 text， 图 片 为 image， 必 填 项 。 


content: 文本 消息 内 容 ， 必 填 项 。 


media id: 发 送 的 图 片 的 媒体 ID， 通 过 新 增 素材 接口 上 传 图 片 文 
件 获 得 ， 必 填 项 。 


请 求 接口 后 微 信 服务 器 将 返回 调用 结果 ， 其 返回 错误 码 意 义 如 


下 : 


-1: 系统 每 低 ， 此 时 请 开发 者 稍 候 再 试 。 


-0: 请 求 成 功 。 


.40001: 


获取 access_token 时 AppSecret 销 误 ， 或 者 access_token 无 


效 。 请 开发 者 认真 比 对 AppSecret 的 正确 性 ， 或 查看 是 否 正 在 为 恰当 的 
小 程序 调用 接口 。 


40002: 


40003: 


的 OpenID 。 
“45015: 
“45047: 


“48001: 


不 合法 的 凭证 类 型 。 


不 合法 的 OpenID， 请 开发 者 确认 OpenID 否 是 其 他 小 程序 


回复 时 间 超 过 限制 。 
客服 接口 下 行 条 数 超过 上 限 。 


API 功 能 未 授权 ， 请 确认 小 程序 已 获得 该 接口 。 


4. 临 时 素材 接口 


在 发 送 消 息 时 ，media_id 需 要 填写 临时 过 材 id。 临 时 素材 需要 先 调 
用 新 增 临 时 素材 接口 上 传 至 微 信和 服务， 在 通过 获取 接口 获取 对 应 资源 
id。 目 前 小 程序 只 支持 下 载 图 片 文件 。 


(1) 新 增 临 时 素材 


通过 新 增 素材 接口 可 以 把 本 地 媒体 文件 (目前 仅 支 持 图 片 ) 上 传 
至 微 信 服务 器 ， 用 于 用 户 发 送 客服 消息 或 被 动 回复 用 户 消息 。 接 口 请 
求 为 POST/FORM， 调 用 接口 如 下 : 


https://api.weixin.gqq.com/cgi-bin/media/upload? 


access_token=ACCESS_TOKEN&type=TYPE 
参数 说 明 如 下 : 
access_token: 调用 接口 凭证 ， 必 填 项 。 
-type: image， 必 填 项 。 


-media: form-data 中 媒体 文件 标识 ， 有 filename 、filelength 、 


content-type 等 信息 。 


示例 代码 ， 利 用 cufl 命 令 ， 用 FORM 表 单方 式 上 传 一 个 多 媒体 文 
| 


curl -F media=@test.jpg https://api.weixin.qq.com/cgi-bin/media/upload? 
access_token=ACCESS_TOKEN&type=TYPE 


调用 后 正 利 情况 会 返回 以 下 JSON 数 据 : 


mh type" . "TYPE" 
"media_id":"MEDIA ID", 
"created at":123456789 


错误 情况 会 返回 以 下 JSON 数 据 : 


"errcode":40004, 
"errmsg":"invalid media type" 


返回 字段 如 下 : 

type: image 。 

media id， 媒体 上 传 后 ， 获 取 标识 。 
created_at: 媒体 文件 上 传 时 间 礁 。 
(2) 获取 临时 素材 


通过 调用 获取 临时 素材 接口 ， 可 以 获取 已 上 传 的 临时 文件 ， 目 前 
小 程序 仅 支 持 下 载 图 片 文件 。 接 口 请 求 为 POST/FORM， 调 用 接口 如 
下 : 


https://api.weixin.qq.com/cgi-bin/media/get? 


access_token=ACCESS_TOKEN&media_ id=MEDIA_ID 
参数 说 明 如 下 : 
“access_token: 调用 接口 凭证 。 
-media id， 媒体 文件 ID。 
示例 代码 ， 利 用 curl 命 令 获取 多 媒体 文件 : 


curl -I -6G "https://api.weixin.qq.com/cgi-bin/media/get? 
access_ token=ACCESS TOKEN&media id=MEDIA_ID" 


调用 成 功 后 ， 正 常情 况 将 运 回 HTTP 头 如 下 : 


HTTP/1.1 200 OK 

Connection: close 

Content-Type: image/jpeg 

Content-disposition: attachment; filename="MEDIA ID.jpg" 
Date: Sun, 06 Jan 2013 10:20:18 GMT 

Cache-Control: no-cache, must-revalidate 

Content-Length: 339721 


如 琳 返 回 的 十 视频 素材 ， 内 容 如 下 : 


{ "video_url":DOWN_URL} 


错误 情况 将 返回 一 下 JSON: 


"errcode":40007, 


"errmsg":"invalid media id" 


} 
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5.8.6 ”分享 


小 程序 分 享 页 面 需 要 在 Page 中 定义 onShareAppMessage 芳 数 ， 设 置 
该 页 面 分 享 信息 。 只 有 定义 了 此 事件 画 数 ， 右 上 和 角 才 会 显示 “分 享 ” 按 
钮 。 用 户 点 击 分 训 按 钮 时 会 触发 该 函数 ， 该 函数 返回 的 Object 对 象 将 
用 于 定义 分 享 内 容 ， 目 前 分 享 图 片 不 能 目 定义 ， 系 统 会 取 当 前 页 面 ， 
从 顶部 开始 ， 高 度 为 80% 屏 幕 宽度 的 图 像 作 为 分 享 图 片 。 返 回 Object 属 
性 如 下 : 


title: 分 至 标题 ， 默 认 值 为 当前 小 程序 名 称 。 
-desc: 分 吾 摘 述 ， 黑 认 值 为 当前 小 程序 和 名称。 


-path: 分 享 路 径 ， 必 须 是 以 /开头 且 在 app.json 中 已 注册 的 路 径 ， 
默认 为 当前 页 面 path 。 


示例 代码 如 下 : 


Page({ 
onShareAppMessage: function () { 
return { 
title: ' 自 定义 分 享 标题 '， 
desc: ' 自 定义 分 享 描述 '， 
path: '/page/home?tab=cart'" 


}) 


5.8.7 ”获取 二 维 码 


小 程序 除了 分 享 当 前 页 面 也 可 以 通过 调用 后 台 接 口 生成 任意 页 面 
对 应 二 维 码 ， 扫 描 该 二 维 码 即 可 直接 进入 小 程序 对 应 页 面 。 通 过 该 接 
口 ， 仅 能 生成 已 发 布 小 程序 的 二 维 码 。 在 开发 过 程 中 可 在 开发 者 工具 
预览 时 生成 开发 版 的 带 参 二 维 码 。 带 参 二 维 码 只 有 10000 个 ， 请 谨慎 使 
用 。 接 口 请 求 方式 为 POST， 接 口 地 址 如 下 : 


https://api.weixin.qq.com/cgi-bin/wxaapp/createwxagrcode? 


access token=ACCESS_ TOKEN 


接口 中 access_token 为 全 局 唯一 调用 凭据， 可 参考 模板 消息 调用 ， 
其 余 POST 参数 如 下 : 


:path: 页 面 路 径 ， 不 能 为 空 ， 最 大 长 度 128 字 和 。 


-width: 二 维 码 的 宽度 ， 默 认 值 为 430。 


5.9 ”小 结 


本 草 主 要 介绍 小 程序 API， 无 论 是 组 件 还 古 API， 大 家 都 可 以 当做 
字典 查询 ， 平 时 大 概 知道 它们 能 提供 的 能 力 、 边 界 ， 在 需要 用 到 的 时 
候 再 细致 研究 。 目 前 小 程序 组 件 和 API 都 在 不 断 丰 富 完善 中 ， 平 时 多 
关注 官方 信息 。 在 接 下 来 章 世 中 我 们 将 进入 实战 环 T。 
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第 6 草案 例 分 


在 前 5 章 中 ， 我 们 学 习 了 小 程序 框架 、 组 件 、API 以 及 开发 相关 的 
基础 知识 。 从 本 章 开始 ， 我 们 将 进入 实战 环节 ， 开 发 小 型 App。 现 阶 
段 小 程序 还 不 太 成 熟 ， 在 不 同 手机 、 不 同 版 本 微 信 环境 下 存在 一 些 差 
异 ， 实 战 实例 中 我 们 主要 讲解 项 目的 架构 思路 和 实现 过 程 ， 通 过 学 
习 ， 再 看 官方 文档 会 变 得 非常 容易 。 通 过 实践 项 目的 学 习 ， 大 家 会 对 
小 程序 研发 有 更 深刻 的 认识 ， 为 了 便于 学 习 ， 实 战 项 目 中 均 未 使 用 
ES6 狐 特性 ， 本 章 的 所 有 源码 可 在 https://github.com/wxapp- 
book/douban.git 下 载 。 


为 了 让 大 家 快速 了 解 开 发 流程 ， 我 们 选用 豆 辨 电影 作为 第 一 个 实 
例 ， 在 这 个 实例 中 ， 我 们 主要 调用 豆瓣 的 开放 API 接 口 ， 这 样 我 们 能 
将 更 多 精力 集中 到 小 程序 本 号 的 开发 上 。 豆 办 对 接口 作 了 权限 设置 ， 
公开 的 数据 相对 较 少 ， 这 使 得 我 们 的 实践 项 目 只 有 两 个 页 面 。 电 影 列 
表 页 和 电影 详情 页 (如 图 6-1 所 示 ) ， 虽 然 项 目 小 、 代 码 量 不 大 ， 但 是 
在 架构 上 本 项 目 是 前 端 常 用 架构 ， 基 于 这 套 代码 架构 可 以 搭建 任意 复 
杂 有 的 项 目 。 


6.1 准备 工作 


在 开始 代码 编写 前 ， 首 先 确认 服务 端 域名 已 添加 在 微 信 受 信任 链 
接 中 ， 同 时 是 HTTPS 服 务 。 


6.1.1 豆 办 API 


现在 很 多 公司 都 有 自己 的 开放 平台 ， 比 如 淘宝 开放 平台 、 腾 讯 开 
发 者 平台 、 高 德 API、 百 度 API 等 ， 它 们 都 提供 了 很 多 强大 的 平台 数据 
服务 ， 利 用 这 些 服务 我 们 能 很 快 搭建 出 应 用 ， 提 高 开发 效率 、 节 省 服 
务 絮 资源 。 这 些 API 大 部 分 都 是 需要 申请 的 ， 豆 关 API 在 部 分 信息 上 也 
作 了 权限 限制 ， 我 们 能 调用 部 分 接口 和 接口 中 部 分 数据 。 本 实例 仅 用 
到 豆 闪电 影 API， 我 们 可 以 在 豆 辩 API 官 网 
(http://developers.douban.com/wiki/? title=api_v2 ) 上 看 到 所 有 API 信 
已 ， 目 前 API 是 2.0 版 本 ， 提 供 的 服务 如 图 6-2 所 示 。 
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图 6-1 豆瓣 电 影 界面 


ApiV2 索引 


图 书 Api V2 
电影 Api V2 
音乐 Api V2 
同城 Api V2 
广播 Api V2 
用 户 Api V2 
日 记 Api V2 
相册 Api V2 
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回复 Api V2 


我 去 Api V2 


图 6-2 ”豆瓣 API V2 


进入 电影 API， 我 们 主要 使 用 正在 热 映 、 即 将 上 映 、 电 影 条 目 信息 
这 3 个 API 接 口 : 


:正在 热 映 


接口 地 址 : https://api.douban.com/v2/movie/in_theaters 


参数 city: 正在 热 映 列表 地 址 ， 可 以 传 中 文字 符 或 城市 编号 ， 
如 “北京 ”、“110000”， 默 认为 北京 。 


例 : https://api.douban.com/v2/movie/in_theaters? city= 北 京 
-即将 上 映 

接口 地 址 : https://api.douban.com/v2/movie/coming_soon 
参数 如 下 : 

Start: 开始 的 万 点 ， 默 认为 0。 

count: 请 求 返回 列表 条 数 ， 默 认为 20。 

例 : https://api.douban.com/v2/movie/in_theaters? start=0&count=20 
电影 条 有 目 信 息 


接口 地 址 :https://api.douban.com/v2/movie/subject/: id ， 这 个 接口 


例 : https://api.douban.com/v2/movie/subject/1324043 


6.1.2 ” 跳 转 层 


由 于 豆 办 API 不 能 文 持 非 浏览 需 客 户 闪 发 起 的 请 求 ， 非 浏览 硕 客 户 
端 需要 下 载 对 应 的 SDK 来 请 求 API， 所 以 小 程序 在 微 信 中 打开 时 不 能 
接 调 用 豆 故 API 接 口 ， 所 以 我 们 利用 目 己 的 服务 紫 做 了 一 次 请 求 跳 转 

(如 图 6-3 所 示 ) ， 这 也 是 无 奈 之 举 : 


6 https://www.wxapp-gateway.com.movie.in_theaters 3 http://apl.douban.com/v2/movie/in theaters 所 = 可 


EO 
自己 的 服务 需 豆瓣 API 服务 器 
图 6-3 ”服务 器 请 求 流程 


豆瓣 API 非 常规 范 ， 后 台 只 需要 做 简单 跳 转 便 可 以 实现 跳 转 ， 当 用 
户 请 求 https://www.wxapp-gateway.com/movie/in_theaters 上 时， 我 们 后 台 
服务 请 求 豆 准 对 应 的 API 地 址 : 
http://api.douban.com/v2/movie/in_theaters ， 服 务 端 我 们 使 用 
nodejs+express 实 现 后 台 ， 搭 建 nodejs 和 express 的 过 程 我 们 不 再 警 述 ， 大 
家 可 以 参考 网 络 教程 ， 具 体 router 跳 转 代 码 如 下 : 


Var express = require('express'), 
router = express.Router(), 
http = require( 'http' ), 
fn; 


/* GET users listing. */ 
router.get('/', function(req, res, next) { 
// 拦截 所 有 movie 子 域 下 的 请 求 ， 获 取 真 正 的 请 求 地 址 
var path = redq,originalUrl,replace( '/movie/', '' ); 
_fn.getData( path, function( data ) { 
// 返回 从 豆 准 请 求 的 数据 


res.send( data ); 


_fn={ 
getData : function( path, callback ) { 
// 向 豆 办 发 起 请 求 
http.get( { 
hostname : "api.douban.com'， 
path : '/v2/movie/' + path 
}, function( res ) { 
var body = [1]; 
// 监听 chunk 包 
res.on( 'data', function( chunk ) { 
body.push( chunk ); 
} ); 
// 回调 函数 
res.on( 'end', function( ) 
// 将 buffer 转 为 string， 调 方法 
body = Buffer .concat( body ) 
callback( body.tostring() ); 


module.exports = router ; 


Var movie = require('./routes/movie'); 
var app = express(); 

// 在 app .js 中 配置 路 
app.use('/movie/*', movie); 


6.2 ”技术 架构 


在 项 目 编码 之 前 ， 我 们 需要 先 思考 项 目的 架构 ， 保 证 项 目 具备 一 
定 的 拓展 性 、 项 目 之 间 的 耦合 度 足 够 低 、 项 目的 代码 具备 复 用 的 能 
力 ， 这 样 才能 提高 团队 的 编码 效率 。 借 用 服务 端 三 层 架 构 模 式 ， 一 个 
项 目 可 分 为 表现 层 、 业 务 逻 辑 层 、 数 据 访问 层 ， 前 端 项 目的 架构 如 图 6- 
ANIA 3 


| 
| | 
| lib | 
| | 
| ' 


图 6-4” 豆 辩 App 染 构 


lib: 放置 一 些 最 换 层 、 第 三 方 库 ， 如 jquery 、seajs 、grcode 、 
echarts 等 ， 通 常 lib 层 是 全 公司 共用 一 套 。 豆 辩 电影 中 由 于 没有 第 三 方 
库 文 件 ， 或 者 说 小 程序 框架 本 身 就 是 一 个 第 三 方 库 ， 所 以 没有 lib 层 。 


common: 放置 和 项 目 相关 的 一 些 公 共 人 代码， 如 转 码 、 工 具 包 、 公 
共 样 式 设 置 等 。 根 据 业 务 需 要 可 以 将 widgets 和 common 合 并 为 一 个 目 
= 


service: 业务 逻辑 层 ， 按 业务 类 型 整合 相关 的 方法 ， 向 上 其 露 需 
要 的 接口 方法 ， 比 如 a 页 面 需要 调用 登录 和 列表 信息 ，b 页 面 需 要 调用 
登 水 和 详情 信息 ， 那 么 这 两 个 页 面 中 的 登 孙 接口 吏 会 被 调用 两 次 ， 这 
时 我 们 便 可 以 将 这 种 和 业务 紧密 相关 的 接口 调用 方法 封 半 起 来 ， 作 为 
一 个 服务 其 露 给 上 层 应 用 。 业 务 逻 辑 层 能 降低 表现 层 对 业务 的 关注 ， 
让 更 多 精力 关注 在 页 面 渲染 、 页 面 交互 等 功能 上 。 


widgets: 一 些 通用 的 市 UI 的 小 组 件 ， 如 pop、header、 购 物 车 图 标 
等 等 ， 它 和 common 层 有 些 类 似 ， 但 是 相对 common 层 ，widgets 具 备 UI 
界面 和 一 个 闭环 的 交互 功能 。 由 于 业务 问题 ， 在 豆 欠 电影 实例 中 没有 
widgets 目 录 。 


:pages: 表现 层 ， 一 般 表现 层 中 一 个 文件 夹 对 应 一 个 页 面 所 涉及 的 
所 有 资源 。 


这 种 分 层 方式 生前 端 项 目前 见 的 以 构 分 层 方式 ， 适 用 于 任何 原 
则 ， 同 时 按照 组 件 化 原则 我 们 通 肖 会 把 一 个 组 件 、 包 、 页 面 所 涉及 的 
所 有 资源 放 鞋 在 一 个 目 好 中， 如 图 6-5 所 示 。 


Vv demo 
VT common 
vw basestyle 
bP images 
basestyle,wxss 
Ww utils 
Utils,js 
WV pages 
Vv detail 
detailjs 
detailjson 
detail.wxml 
detail.wWwxss 
Vv home 
home,js 


home,json 


home,wxml 
home.wxss 
WV service 
Pp douban 
appjJjs 
appjson 
app.wWwxss 


图 6-5” 目 承 结构 


如 在 basestyle 中 ， 我 们 放置 了 wxss 和 相关 的 图 片 资 源 ， 这 样 在 不 同 
项 目 开发 中 需要 复 用 组 件 的 情况 下 ， 我 们 就 可 以 直接 将 目 孙 揽 贝 过 
去 ， 而 不 用 在 不 同 目录 中 查找 当前 组 件 相关 的 资源 。 我 们 平时 编码 过 
程 中 ， 尺 量 把 相关 的 文件 放 到 一 个 目录 中 ， 通 汕 目 好 名 和 模块 入 口 名 
一 致 。 豆 办 电影 相关 目 永 如 下 : 


:basestlye: 一 些 项 目 公 共 的 基本 样式 ， 极 app.wxss 引 入 ， 当 前 项 目 
中 没有 公共 样式 ， 内 容 为 空 。 


utils: 基础 工具 包 ， 项 目 中 我 们 把 系统 toast 进 行 了 一 层 代 理 ， 封 闻 
到 对 应 方法 中 ， 如 果 以 后 需要 改变 toast 行 为 ， 我 们 便 可 以 直接 修改 代 
码 ， 而 不 用 在 每 个 调用 页 面 进 行 修 改 。 


-detail: 评 情 页 相关 资源 。 


:home: 首页 相关 资源 。 


douban: 请 求 豆 办 接口 的 相关 逻辑 代码 。 


6.3 ”公共 模块 开发 


按照 上 述 架 构 插 述 ， 我 们 对 相关 的 模块 和 功能 进行 了 划分 ， 现 在 
只 需要 按照 规划 实现 代码 即 可 。 我 们 首先 讲述 service 和 utils 的 编写 。 
在 JavaScript 整 体 编码 中 一 般 handle 是 需要 对 外 暴露 的 公共 方法 的 名 
柄 ， 写 在 模块 前 面 ，_ 甸 是 私有 方法 ， 写 在 后 面 ， 这 样 便于 他 人 阅读 代 
码 ， 一 打开 代码 便 看 见 当 前 模块 对 外 烘 露 的 方法 ， 然 后 层 层 往 下 阅 
读 ， 这 是 多 年 形成 的 编程 习惯 ， 大 家 阅读 代码 时 可 以 留意 下 。 


6.3.1 业务 逻辑 层 


在 本 实例 中 我 们 将 豆 辩 相关 业务 封装 到 douban.js 中 ， 虽 然 
douban.js 只 有 一 个 文件 ， 按 规则 我 们 仍然 将 它 放 在 一 个 douban 文 件 夹 
中 ， 这 样 做 的 原因 是 如 果 以 后 douban.js 内 容 过 多 或 需要 多 人 并 行 开 发 
时 ， 我 们 可 以 通过 模块 化 对 这 个 js 进行 拆 分 ，douban.js 代 码 见 代码 清单 


6-1° 
代码 清单 6-1 douban.js 


var handle, 
URL, 
LISTTYPE, 
fn; 


movieList : 'https://www.wxapp-gateway.com/movie/', 


movieDetail : 'https://www.wxapp-gateway.com/movie/subject' 


// 电影 类 型 
LISTTYPE = { 
// 正在 热 映 
1 : "in theaters '， 
// 即将 上 了 映 
2 : 'coming_soon' 


} 


// 暴露 出 去 的 服务 接 
handle = { 
// 获取 列表 
getMovieList : function( type, callback ) { 
Var url = URL.movieList + LISTTYPE[type]， 
_fn.getData( { 
Url : url 
}, callback ); 


}, 

// 获取 详情 
getMovieDetail : function( id, callback ){ 
var Url = URL.movieDetail]l + '/' + id; 
_fn.getData( { 
Url : url 


}, callback ); 


} 
} 
_fn={ 
// 将 网 络 请 求 统一 放置 在 一 个 方法 中 
getData : function( param, callback ) { 
wx.request( { 
url : param.url, 
method : 'get', 
data : { 
apikey : '00fa6c0654689a0202ef4412fd39ce06 
} 
header: { 
'Content-Type': 'application/json' 
} 
success : function( e ) { 
callback( e.data ); 
fail : function( e ) { 
callback(); 
} ); 
} 
} 


module.exports = handle,; 


6.3.2 ”公共 模块 


公共 模块 中 我 们 只 有 basestyle 和 utils 两 个 文件 夹 ，basesytle 是 公共 
样式 ， 本 实例 没有 实现 ， 按 basestyle 思 路 我 们 可 以 创建 其 他 风格 样 
式 ， 在 页 面 中 如 果 需 要 切换 时 直接 切换 class 属 性 名 便 可 以 统一 切换 风 
格 。 


utils 只 是 为 了 给 大 家 进行 演示 ， 仅 做 了 人 简单 封装， 代码 如 下 : 


var handle,; 


handle = { 
showLoading : function () { 
wx.showToast( 
title : ' 数 据 加 载 中 '， 
Icon : 'loading', 
duration : 10000 
); 


hideLoading ; function() { 
wx.hideToast(); 


common 上 日 录 内 的 模块 并 没有 统一 的 拆 分 规则 ， 可 以 按 实 际 项 目 需 


6.4 ”页面 构建 


与 开发 前 端 项 目 一 样 ， 我 们 先 编写 页 面 构建 ， 再 编写 逻 错 代码 。 
电影 票 业务 比较 简单 只 有 两 个 页 面 ， 即 首页 和 详情 页 。 


6.4.1 首页 


构建 首页 时 ， 我 们 使 用 了 一 个 fixed 布 局 的 头 ， 这 样 在 视觉 上 微 信 
原生 的 头 部 变 高 了 ， 在 样式 效果 上 ， 基 本 没有 使 用 背景 图 片 ， 通 过 box- 
shadow、 text-shadow 以 及 背景 渐变 实现 多 种 效果 。 列 表 布 局 上 主要 使 
用 了 Flex 布 局 ， 整 体 结构 如 图 6-6 所 示 。 


Flex 布局 的 tab 
fixed 布局 的 header 


Flex 布局 的 列表 


、 .wD 


图 6-6 ”首页 结构 图 


首页 布局 代码 如 代码 清单 6-2 和 代码 清单 6-3 所 示 。 


代码 清单 6-2 home.wxml 


<view class="header"> 
<view class="nav" bindtap="changeTab"> 


<view class="nav-wrapper"> 
<block wx:for="{{tabs.1list}}"> 
<view class="tab current" data-type="{{item.type}}" data-index="{{index}}" 
wx:if="{{index / 1 == tabs.currentIndex / 1}}">{{item.text}}</view> 
<view class="tab" data-type="{{item,.type}}" data-index="{{index}}" wx:else> 
{{item.text}}</view> 
</block> 
</view> 
</view> 
</view> 


<view class="1list basestyle"> 
<block wx:for="{{movies.subjects}}"> 
<view class="item"> 
<navigator url="../detail/detail?id={{item.id}}"> 
<image mode="aspectFill" src="{{item.images.large}}"></image> 
<text>{{item.title}}</text> 
</navigator> 
</view> 
</block> 
</view> 


代码 清单 6-3 home.wxss 


/* 头 部 */ 

.header { position: fixed; top : 0; left : 0; padding : 10rpx 30rpx 15rpx 30rpx; 
width : 691rpx; background: -webkit-gradient(linear, 0 0, © 100%, 
from(#3f3f3f), to(#2f2f2f)); border-bottom : solid 1px #000; box-shadow: 
© 2px 4px #111; } 

.header .bar { height : 60rpx; font-size : 28rpx; background-color : #888; 
color : #fff; } 


/* 导航 */ 

.Nav { height : 60rpx; width : 100%; background-color: #373737; border : solid 
1px #000; border-radius: 5px; overflow: hidden; box-shadow : 9 -1pXx Opx 
#777; } 

.Nav .nav-wrapper { width : 693rpx; height : 100%; display : flex; position: 
relative; } 

.nav .tab { color : #111; flex-grow : 1; font-size : 28rpx; border-right : solid 
1px #000; width : 50%; background: -webkit-gradient(linear, 0 0, © 100%, 
from(#636363), to(#4f4f4f)); text-align: center; line-height: 60rpx; } 

.Nav .tab:first{ border-left : none; 

.Nav ,tab,current { color : #fcfcfc; font-weight : bold; background: 
-webkit-gradient(linear, 0 ©0, © 100%, from(#252525), to(#2f2f2f)); 
box-shadow: inset 0 © 4px #111; text-shadow : © 2px 3px #000; } 


/* 列表 */ 
.list { display: flex; flex-wrap : wrap; padding : 90rpx © 30rpx 30rpx; 
background-color: #3f3f3f; } 
.list .item { font-size: 24rpx; text-align: center; width : 210rpx; margin-top 
30rpx; margin-right : 30rpx; } 
.list .item image{ height : 325rpx; width : 100%; box-shadow: 3px 3px 4px #111; } 
.list .item text { width : 100%; height : 32rpx; margin-top : 10rpx; color 
#fff; line-height: 32rpx; display: block;white-space:nowrap; 
overflow:hidden; text-overflow:ellipsis; } 


6.4.2 ”详情 页 


详情 页 整体 布局 比较 简单 ， 分 为 基本 信息 、 人 简介 、 主创 三 块 ， 在 
视觉 上 我 们 使 用 阴影 让 模块 间 产 生 层 级 的 效果 ， 在 基本 信息 中 背景 使 
用 了 一 张 模 糊 后 的 图 片 。 要 注意 的 是 如 采 页 面 高 度 不 够 页 面 背景 默认 
会 显示 日 色 ， 而 小 程序 没有 峻 露 相关 接口 设置 页 面 背景 闫 色 ， 所 以 在 
详情 页 中 我 们 在 最 外 层 嵌 套 了 一 个 view， 通 过 轩 辑 层 计 算 的 高 度 ， 设 
置 它 的 最 小 高 度 ， 这 样 便 能 通过 设置 这 个 view 的 背景 色 达 到 修改 页 面 
至 景色 的 效果 ， 整 体 布局 结构 如 图 6-7 所 示 。 


| Post 图 片 


底部 放大 模糊 的 图 片 


A 人 
间 个 


主创 列表 , scroview 


营 改 的 view 


图 6-7 详情 页 结构 图 


详情 页 布局 代码 如 代码 清单 6-4 和 代码 请 单 6-5 所 示 。 


代码 清单 6-4 detail.wxml 


<view style="min-height : {{screen.minHeight}};background-color: #2f2f2f;"> 
<view class="banner"> 
<view class="poster"> 
<image mode="aspectFit" src="{{movie.images.large}}"></image> 
</view> 
<view class="info"> 
<view class="title">{{movie.title}}</view> 
<view>{{movie.aka[movie.aka.length - 1]}}</view> 
<view class="score">{{movie.rating.average}}<view> 分 </view></view> 
<view class="subinfo"> 
<view>{{movie.genresstr}}</view> 
<view>{{movie.year}} 上 映 </view> 
</view> 
</view> 
<image class="background" mode="aspectFill" src="{{movie.images.large}}"> 
</image> 
</view> 


<view class="summary"> 
{{movie.summary}} 
</view> 


<view class="casts"> 
<view class="title"> 主 创 </view> 
<scroll-view scroll-x> 
<view class="casts-wrapper" style="width:{{movie.staff,.]length*183}}rpx;"> 
<view class="avatar" wx:for="{{movie.staff}}"> 
<image mode="aspectFill" src="{{item.avatars.large}}"></image> 
<view>{{item.name}}</view> 
</view> 
</view> 
</scroll-view> 
</view> 
</view> 


代码 清单 6-5 ”detail.wxss 


/* 电影 简介 */ 

.banner { overflow: hidden; height : 535rpx; background-color: #fff; 
position:relative; box-shadow : © 0 10px #111; border-bottom : solid 1ipx 
#000; background-color: #222,; 

.banner ,background { width : 130%; height :130%; margin-left : -15%; margin-top: 
-15%; filter: blur(10px); opacity: 0.7; } 


/* 海报 */ 

.banner .poster { box-shadow: 3px 3px 5pXx #222; position: absolute; left : 30rpx; 
top : 40rpx; z-index : 1; width : 300rpx; height : 435rpx; padding : 10rpx; 
background-color: rgba(255,255,255,0.4); } 

.banner .poster image { width : 100%; height: 100%; } 


/* 相关 信息 */ 

.banner .info { position: absolute; color : #fff; z-index : 2; width : 320rpx; 
left : 390rpx; top : 40rpx; font-size : 24rpx; } 

.banner .info .title { font-size : 46rpx; font-weight: bold; margin-bottom : 
iorpx; } 


.banner .info .Score { margin-top: 60rpx; font-size : 46rpx; color : #FFC125; } 

.banner .info .Score view{ font-size : 24rpx; display: inline; margin-left 
iorpx; } 

.banner .info .subinfo { margin-top : 20rpx; } 


/* 简介 */ 
.Summary { font-size : 28rpx; line-height : 32rpx; padding : 20rpx 20rpx 40rpx 
20rpx; color : #fafafa; background-color: #222; } 


/* 演员 列表 */ 

.Casts { background-color: #2f2f2f; } 

.Casts .title { padding: 10rpx 20rpx; font-size : 34rpx; color : #fff; 
font-weight: bold; text-shadow : 0 2px 34px #000; background: 
-webkit-gradient(linear, 0 0, © 100%, from(#333), to(#2f2f2f)); box-shadow : 
© -1px 3px #111; border-top : solid 1px #444; } 

.Casts scroll-view { height : 310rpx; width : 730rpx; padding : © 10rpx; overflow: 
hidden; background-color: #2f2f2f; 

.Casts scroll-view .avatar { display: block; float: left; padding : 10rpx 15rpx; 
width : 153rpx; height : 222rpx; } 

.Casts scroll-view image { width : 153rpx; height : 222rpx; box-shadow: 3px 
3px 4px #111; } 

.Casts scroll-view ,avatar view { text-align: center; width : 100%; font-size : 
24rpx; line-height : 26rpx; overflow: hidden; height : 52rpx; margin-top 
10rpx; color : #ccc; } 


6.5 ”页面 逻辑 开发 


在 小 程序 逻辑 开发 中 ， 数 据 模型 的 设计 特别 关键 ， 直 接 决 是 了 地 
辑 代码 和 布局 代码 的 复杂 度 ， 开 发 之 前 一 定 要 多 人 花 时 间 整 理 数据 模 


型 。 


6.5.1 首页 


首页 中 数据 模型 主要 分 为 tb 和 movie， 在 tab 中 我 们 设置 了 一 个 当 
前 选中 的 index 便 于 泻 染 和 修改 状态 ，movie 直 接 赋 值 豆 办 返回 的 数 
据 ， 没 有 进行 加 工 。 在 代码 设计 上 ， 我 们 认为 列表 的 泻 染 永 远 和 tab 相 
天 ， 进 入 首页 时 也 只 是 触发 选中 第 一 个 tab， 这 种 设计 思路 将 大 大 减少 
我 们 的 代码 量 。 虽 然 我 们 可 以 通过 setData 方 法 触发 页 面 泻 染 ， 但 我 们 
仍然 么 露 了 一 个 renderList 方 法 ， 这 是 因为 有 可 能 在 演 染 页 面前 需要 对 
返回 的 数据 进行 加 工 ， 这 时 便 可 在 renderList 方 法 中 对 数据 进行 处 理 。 
在 编写 代码 过 程 中 ， 一 定 要 注意 代码 的 可 读 性 ， 尽 量 使 用 通俗 易 懂 的 
编码 方式 。 应 与 当前 逻辑 层面 不 相关 的 代码 都 封装 到 一 个 可 理解 的 方 
法 中 ， 这 样 才 能 便于 多 人 维护 代码 ， 首 页 逻辑 代码 如 代码 清单 6-6 所 


人 小? 


代码 清单 6-6 home.js 


var service = require( '../../service/douban/douban' ), 
utils = require( '../../common/utils/utils' ), 
_fny 
Page( { 
data : { 
movies : {}, 
tabs : 
currentIindex : 0, 
list : [{ 
text : ' 正 在 热 映 '， 


type : "1 
}, 
text : ' 即 将 上 映 '， 
pe : '2" 


} 
}, 
onReady : function() { 
// 进入 便 选 择 第 一 项 
_fn.selectTab.call(this, © ); 
}, 
changeTab : function( e ) { 
var target = e.target,; 
// 选中 不 同 项 
_fn.selectTab.call( this, target.dataset.index ); 
} 
} ); 


_fn={ 
selectTab : function( index ) { 
var self = this, 
tabs = self.data.tabs; 
// 切换 状态 
self,.,setData( { 
'tabs.currentIindex' : index 
} ); 
utils.showLoading(); 
// 获取 数据 
service.getMovieList( tabs.list[index].type, function( data ) { 
utils.hideLoading(); 
// 泻 染 页 面 
_fn.renderList.call( self, data ); 
} ); 


也 
renderList : function( data ) { 
data = data || listData; 
// 可 能 会 对 数据 进行 处 理 
this.setData( { 
movies : data 


} ); 
} 


6.5.2 ”详情 页 


详情 页 十 分 简单 ， 仅 仅 是 获取 后 台数 据 后 进行 展示 ， 其 代码 如 代 
码 清单 6-7 所 示 。 


代码 清单 6-7 detail.js 


var service = require( '../../service/douban/douban' ), 
utils = require( '../../common/utils/utils' ), 
_fn, 

Page( { 
data : { 


movie : {}, 
Screen : { 
minHeight : "auto' 


了 
onLoad : function( query ) { 
Var self = this， 
utils.showLoading(); 
// 设置 页 面 高 度 ， 避 人 免 底 部 出 现 白色 区 域 。 
wx.getSystemInfo( { 
success : function( info ) { 
self,.,setData( { 


'screen.minHeight' : info.windowHeight + 'px' 
} ); 
} 
// 获取 数据 
service.getMovieDetail( query.id, function( data ) { 
data = data || movieDetail; 


console.log( data ); 
utils.hideLoading(); 
_fn.render.call( self, data ); 


} ); 
} 
} ); 
_fn={ 
render : function( data ) { 
// 设置 描述 


data.genreSsStr = data.genres, join( '/' ); 
// 把 演员 和 导演 都 罗列 出 来 
data.staff = data.directors.concat( data.casts ); 
this.setData( { 
movie : data 


} ); 


6.6 小结 


豆 办 电影 实例 整体 业务 逻辑 不 复杂 ， 整 体 实现 非常 简单 ， 基 于 这 
个 简单 项 目的 代码 架构 ， 可 以 快速 搭建 出 任何 项 目 。 


第 7 章 ”案例 分 析 一 一 鸭 考 


目前 市 面 上 有 很 多 与 机 动车 芍 驶 人 培训 考试 〈 以 下 简称 芍 考 ) 有 
天 的 App， 这 些 App 提 供 了 丰富 的 与 要 考 相 关 的 服务 ， 在 市 场 上 得 到 了 
广泛 认可 。 本 章 会 使 用 微 信人 小 程序 制作 一 款 类 似 的 App。 项 目的 源码 
地 址 为 : https://github.com/wxapp-book/jiakao.git 。 


目前 ， 芍 考分 为 四 个 阶段 ， 分 别 为 科目 一 : 理论 考试 ;科目 二 : 
场地 技能 考试 ， 科 目 三 ， 道 路 技巧 考试 ， 科 目 四 : 安全 文明 敬 驶 考 
试 。 其 中 科目 一 与 科目 四 为 理论 上 机 科目 ， 科 目 二 与 科目 三 为 实践 性 
科目 。 本 章 练习 项 目的 重点 是 开发 科目 一 和 科目 四 的 试题 练习 ， 通 过 
完成 “顺序 练习 ”、“ 模 拟 考 试 *”、“ 成 绩 统计 ”、“ 错 题 本 ”等 功能 ， 使 读 
者 对 小 程序 开发 有 更 清晰 的 思路 。 


7.1 业务 流程 


开发 小 程序 之 前 我 们 先 对 业务 梳理 并 划分 到 不 同 的 页 面 当 中 。 这 
样 保证 不 会 有 业务 被 遗漏 ， 也 有 助 于 在 开发 阶段 对 相似 的 业务 进行 抽 
象 ， 保 证 代码 有 较 低 的 元 余 度 ， 克 约 开发 成 本 。 


在 本 章 练习 App 中 ， 将 业务 分 为 四 个 部 分 : 首页 ， 文 科 考 试 学 习 
(科目 一 、 科 目 四 ) ， 视 频 教学 (科目 二 、 三 学 习 ) ， 系 统管 理 ， 下 
面 将 对 各 个 部 分 的 功能 进行 定义 。 


1. 首 页 : App 的 主 界面 ， 提 供 科目 一 、 科 目 二 、 科 目 三 、 科 目 四 、 
系统 管理 这 些 功 能 的 入 口 。 


科目 一 与 科目 四 的 内 容 包括 三 种 答题 模式 ， 分 别 为 : 顺序 学 习 、 
模拟 考试 、 错 题 本 。 男 外 ， 还 要 提供 用 户 手 动 更 新 题库 的 功能 。 科 目 
二 与 科目 三 需要 使 用 一 个 类 似 轮 播 图 的 组 件 将 学 习 视 频 展示 在 页 面 
上 。 系 统管 理 作为 一 个 单独 的 链接 放 在 页 面 上 。 除 此 之 外 ， 页 面 还 将 
展示 一 些 统计 数据 ， 如 展示 科目 一 与 科目 四 的 答题 正确 率 和 学 习 的 完 
成 进度 等 ， 这 样 可 以 提醒 用 户 学 习 的 成 采 。 


2. 文 科 考 斌 学习， 主要 提供 两 个 页 面 : 


1) 习题 页 面 : 用 户 的 做 题 页 面 ， 该 页 面 会 被 科目 一 和 科目 四 的 三 
种 模式 重用 ， 分 别 为 : 模拟 考试 、 顺 序 学 习 、 错 是 本。 以 下 是 这 三 种 
模式 的 功能 点 : 


.顺序 学 习 : 顺序 学 习 功 能 会 根据 用 户 的 考试 科目 (科目 一 、 科 目 
四 ) 和 车 型 (A1、A2、B1、B2、C1、C2) 获取 匹配 的 完整 题库 ， 然 
后 将 这 些 题库 中 的 习题 顺序 展示 给 用 户 学 习 。 在 用 户 学 习 的 过 程 中 ， 
完成 每 道 题 后 ， 系 统 会 直接 对 用 户 的 答案 是 否 正 确 给 出 结果 。 如 果 正 
确 ， 自 动 切换 至 下 一 题 ， 否 则 ， 标 记 正确 答案 并 给 出 答案 解释 ， 然 后 
将 该 题 加 入 一 个 针对 考试 科目 和 车 型 的 全 局 错 题 本 ， 用 户 可 以 手动 切 
换 下 一 题 ， 继 续 答 题 。 同 时 系统 会 记录 用 户 的 完成 进度 ， 以 供 下 次 学 
习 时 ， 可 以 继续 未 完成 的 练习 。 


.模拟 考试 : 模拟 考试 根据 用 户 的 考试 科目 和 车型， 从 相关 题库 
中 ， 随 机 抽 选 正式 考试 要 求 数目 的 考题 ， 作 为 用 户 的 练习 题 。 与 顺序 
学 习 的 共同 点 是 : 在 做 题 过 程 中 ， 会 实时 判断 用 户 的 作答 是 否 正 确 ， 
并 将 错 题 加 入 全 局 错 题 本 。 不 同 点 是 : 模拟 考试 不 会 影响 顺序 学 习 的 
进度 ， 除 了 会 将 错 题 加 入 全 局 错 题 本 外 ， 还 会 将 其 加 入 一 个 只 与 本 次 
考试 有 关 的 错 题 本 ， 以 供用 户 在 完成 本 次 模拟 考试 后 可 以 及 时 复习 。 


错 题 本 : 错 题 本 有 两 种 ， 一 种 是 全 局 错 题 本 。 它 会 把 用 户 使 用 顺 
序 学 习 功 能 时 ， 做 的 错 题 展示 给 用 户 ， 这 种 错 题 本 用 户 可 以 随时 碍 
看 。 必 一 种 错 题 本 征 针 对 考试 的 错 题 本 ， 这 种 错 题 本 的 进入 链接 只 会 


在 每 次 模拟 考试 结束 后 的 “考试 结果 ”页 提供 ， 并 且 只 会 展示 本 次 考试 
产生 的 错 题 。 用 户 在 完成 错 题 本 的 题目 后 ， 同 样 会 即时 给 出 管 案 是 否 
正确 的 判 晰 ， 如 采 正 确 ， 则 将 该 错 题 移 除 全 局 错 感 本 。 


2) 练习 结果 页 面 : 练习 结果 页 有 两 种 状态 。 第 一 种 作为 模拟 考试 
结果 页 ， 会 在 每 次 模拟 考试 结束 后 显示 ， 主 要 的 显示 内 容 有 本 次 考试 
的 得 分 ， 成 绩 是 否 合格 〈 科 目 一 与 科目 四 合格 均 为 90 分 ) ， 本 次 考试 
背 题 本 的 链接 等 。 第 二 种 是 用 户 完成 了 某 个 考试 科目 和 车 型 对 应 的 “ 顺 
序 学 习 ? 后 ， 看 到 的 结 采 页 。 这 个 结果 页 会 提供 全 局 错 感 本 的 进入 链接 
和 整体 的 正确 率 。 


3. 科 目 二 ， 科 目 三 :这 两 块 的 业务 相对 简单， 这 里 仅 提 供 一 些 教 
学 视频 供 在 线 观 看 。 


4. 系 统管 理 ， 系 统管 理 大 部 分 的 功能 是 与 storage 相 关 的 ， 包 括 清 
除 storage， 以 及 回 storage 中 保存 考试 车 型 等 ， 这 部 分 比较 简单 ， 所 以 
不 会 作为 讲解 重点 。 


7.2 项目 架构 


2 De 


在 本 项 目 中 ， 科 目 一 考试 与 科目 四 考试 属于 理论 性 考试 ， 用 户 都 
需要 一 个 答题 页 ， 这 个 答题 页 在 两 个 考试 科目 中 的 功能 点 、 用 户 交 
互 ， 以 及 业务 方面 几乎 完全 相同 ， 所 以 在 设计 页 面 的 时 候 ， 可 以 考虑 
将 其 合并 为 一 个 页 面 ， 在 开发 的 过 程 中 尽量 将 甜 异 性 的 东西 隔离 开 
来 ， 保 证 这 个 页 面 可 以 满足 不 同 科 目 和 不 同学 习 模 式 的 泻 染 需求 。 


数据 方面 ， 一 共 调 用 了 两 个 HTTP 接 口 ， 这 两 个 接口 一 个 是 根据 考 
试 科目 、 考 试车 型 、 学 习 类 型 (顺序 学 习 、 随 机 考试 ) 获取 考题 的 接 
口 《以 下 简称 考题 接口 ) ， 另 外 一 个 是 获取 考试 答案 的 映射 的 接口 
(以 下 简称 答案 映射 接口 ) 。 由 于 区 考 文 科 考 试 包含 单 选 题 气 多 选 
题 ， 所 以 可 能 的 答案 组 合 有 17 种 ， 考 题 接 口 返回 的 考题 答案 只 是 一 个 
代码 ， 这 个 代码 代表 了 这 17 种 组 合 的 一 种 ， 所 以 需要 一 种 映射 机 制 去 
获取 正确 管 案 。 这 个 接口 就 是 这 个 映射 的 依据 。 


存储 管理 ， 系 统 中 的 一 些 常用 的 数据 如 用 户 的 考试 车 型 一些 需 
要 请 求 ， 但 是 变化 频率 又 不 高 的 数据 ， 都 可 以 存储 在 微 信 小 程序 的 
storage 中 ， 这 些 数 据 的 storage key 值 需要 作为 常量 来 管理 。 


考试 页 面 是 一 个 单 页 面 系统 。 用 户 在 答题 的 时 候 ， 系 统 会 根据 用 
户 的 点 击 (如 用 户 点 击 上 一 题 或 下 一 题 ) ， 以 及 答题 正确 后 系统 自动 
切换 题目 的 方式 ， 切 换 不 同 题 目的 “页 面 *。 笔者 在 最 初 实现 这 个 功能 
的 时 候 ， 使 用 了 小 程序 的 swiper 组 件 ， 因 为 swiper 自 带 了 左右 滑动 功 
能 ， 可 以 节省 页 面 切换 的 代码 ， 但 是 ， 当 用 swiper 去 泻 染 “顺序 学 
习 ” 的 页 面 时 ， 题 目 会 超过 1000 道 ， 一 次 泻 染 节 点 数量 也 非常 多 ， 导 致 
页 面 的 性 能 很 低 ， 以 至 于 无 法 正常 调试 。 于 是 考虑 将 题目 分 批 次 泻 
染 ， 即 每 次 泻 染 10 道 题 ， 当 用 户 越过 每 批 次 的 第 1 题 或 者 第 10 题 时 ， 通 
过 swiper 的 bindchange 事 件 触 发 癌 前 渲染 10 道 题 或 者 向 后 泻 染 10 道 题 ， 
但 是 却 发 现 swiper 组 件 在 配置 autoplay 为 false 的 情况 下 ， 当 到 头 或 者 到 
尾 的 时 候 不 会 触发 bingchang 事 件 ， 进 过 反复 尝试 ， 最 后 放弃 这 个 实现 
方案 ， 改 用 了 另外 一 种 通用 的 单 页 面 的 解决 方案 ， 这 个 也 是 本 项 目的 
难点 之 一 。 


数据 统计 ， 用 户 在 学 习 或 者 考试 完成 后 ， 需 要 对 考试 和 学 习 的 正 
确 率 进 行 统计 和 展示 ， 这 要 求 系统 在 答题 过 程 中 ， 将 答题 的 正确 与 否 
随时 记录 并 且 组 成 一 个 集合 ， 在 答题 完成 后 ， 对 这 个 集合 的 正确 和 错 


翅 的 答题 进行 统计 。 


7.2.2 ”项 目 结构 图 


图 7-1 是 项 目 结构 图 ， 下 边 将 介绍 各 个 部 分 所 承担 的 功能 。 


vw CS drving-license-exam 
v CG common 
Tj 
因 constantjs 
四 queuejs 
因 wxjs 
v CC wxss 
main,wx55 
vw CS component 
question,wxmil 
国 scroll.wxml 
Tlib 
加 underscore,js 
VC pages 
» OD finish 
> 辣 home 
> system 
b OO test 
» OO video 
Vv CL service 
加 answer-service,js 
四 exam-service,js 


question-service.js 
» utils 
由 appjs 
四 appjson 
因 app.wxss 


图 7-1 项 目 结构 


common: 存放 一 些 公共 业务 相关 的 代码 。 


1) wx.js 与 constatn,js 是 主要 的 两 个 文件 。wxjs 的 主要 功能 是 封装 
一 些微 信人 小 程序 的 确 层 API。 在 开发 过 程 中 ， 有 一 些 底层 的 微 信 小 程 
序 API 志 需要 我 们 根据 目 身 业务 进行 进一步 封 猴 的 ， 例 如 wx.request 这 
个 方法 ， 我 们 在 请 求 数据 的 时 候 ， 需 要 携带 聚合 数据 《聚合 数据 会 在 
7.2.3 下 介绍 ) 的 AppKey 作 为 一 个 参数 ， 但 是 在 多 人 合作 开发 的 情况 
下 ， 业 务 开 发 者 不 需要 关心 这 个 参数 ， 所 以 ， 为 了 减少 开发 时 间 ， 类 
似 这 样 的 功能 可 以 作为 一 个 公共 的 服务 提供 出 来 。 


2) constant.js 的 主要 功能 是 保存 系统 的 常量 ， 例 如 一 些 常用 的 
storage key、 数 据 接 口 的 URL 等 。 


component: 存放 的 是 一 些 公用 的 小 程序 模板 (template) 。 


lib: 存放 第 三 方 的 类 库 。 这 里 介绍 下 underscore.js。 微 信 小 程序 的 
开发 是 基于 数据 模型 的 ， 所 以 ， 会 有 大 量 的 数据 操作 ， 比 如 列表 得 
询 、 数 据 格式 转换 等 工作 。 在 这 里 选择 underscore.js 作 为 数据 处 理 的 工 
具 ， 它 有 很 多 优势 ， 如 十 分 小 巧 ， 压 缩 后 只 有 4KB; 使 用 方法 简单 ， 
它 提 供 了 几 十 种 函数 式 编程 的 方法 ， 大 大 方便 了 JavaScript 的 编程 ， 覆 
盖 面 广 ， 包 含 了 操作 集合 、 数 组 、 函 数 和 对 象 的 方法 ;社区 人 气 高 ， 
不 用 担心 技术 文 持 的 问题 。 


pages: 存放 页 面 代码 。 


1) finish: 科目 一 和 科目 四 练习 结束 的 页 面 。 
2) home: 首页 。 


3) system: 系统 配置 页 面 。 


4) test: 科目 一 和 科目 四 的 考题 学 习 页 。 
5) video: 科目 二 和 科目 三 播放 视频 的 页 面 。 
service: 存放 公用 服务 代码 。 


1) exam-service.js: 考题 接口 每 次 请 求 的 数据 量 都 比较 大 ， 但 是 
考题 数据 的 变化 频率 却 不 高 ， 所 以 如 果 有 是 请 求 顺序 学 习 的 数据 (全 量 
题库 ) ， 可 以 将 数据 存储 到 微 信 小 程序 的 storage 中 ， 这 样 可 以 减少 用 
户 流量 的 开销 ， 也 可 以 大 大 减少 读 取 数 据 的 等 待 时 间 。 因 此 ， 可 以 抽 
象 出 一 个 服务 层 专 门 提 供 操作 题库 的 功能 ， 如 获取 题库 数据 ， 将 题库 
数据 从 storage 读 取 / 写 入 等 功能 以 供 统计 缓存 管理 等 功能 使 用 。 


2) answer-service.js: 答案 映射 接口 与 考题 接口 也 比较 相似 ， 变 化 
频率 也 不 是 很 高 ， 但 是 返回 的 数据 不 方便 操作 ( 见 图 7-4) ， 需 要 将 其 
转化 为 可 操作 的 数据 格式 。 所 以 ， 针 对 这 个 接口 ， 也 可 以 提炼 一 个 服 
务 。 这 个 服务 包含 的 功能 有 : 获取 管 案 映 味 数据 ， 将 答题 映 冉 从 


storage 读 取 / 写 入 等 功能 。 


3) question-service.js: 系统 在 泻 染 考题 和 判断 用 户 作答 是 否 正 确 
的 时 候 ， 会 用 到 一 些 重 用 率 很 高 的 功能 ， 比 如 判断 当前 考题 是 单 选 题 
还 是 多 选 题 的 方法 ， 还 有 对 比 用 户 答案 与 正确 答案 的 方法 等 ， 这 些 与 
操作 考题 操作 有 关 的 方法 ， 统 一 由 这 个 服务 来 提供 。 


7.2.3 ”数据 接口 


本 章 一 共 调 用 了 两 个 数据 接口 ， 分 别 为 考题 接口 和 答案 映射 接 
口 ， 这 两 个 接口 的 数据 提供 着 并 非 作者 本 人 ， 而 是 调用 了 第 三 方 数据 
供应 商 聚 合 数 据 的 API。 


案 合 数据 是 国内 领先 的 基础 数据 服务 丙 ，B2D 开 发 者 服务 的 先行 
着 。 平 台 是 以 目 有 数据 为 基础 ， 各 种 便捷 服务 整合 以 及 第 三 方 数据 接 
入 ， 为 互联 网 开发 全 行业 提供 标准 化 API 技 术 文 撑 服 务 的 DaaS 平 台 。 


亲 , 请 登录 。 免费 注册 关注 聚合 。 常 则 三 。 联系 我 们 
聚合 代码 。 新 闻 动 态 


影视 娱乐 
。 生 活 /天 气 /健康 WP 人 合集” 呈 磊 运势 ” 现 丁 书记 影 要 记 


党 用 快 着 “全国 天 气 预报 形 杭 所 故地 址 解析 ”周公 解梦 ”影视 4 讯 检 志 


电视 节目 时 间 表 ”QQS 码 到 十 的 。” 老 苗 历 
* 车 辆 /出 行 
全 国 车 二 填写。 全 国 公交 有 路径 规划 吉 询 体育 赛事 4 py 


。 全 和 融 基金 NBA 客 事 款 贡 信 息 大 全 足球 赛事 球 英信 息 大 全 


ee rip i 亚 

货币 汇 志 ”银行 卡 三 元 素 检测 CBAB 队 实事 信息 内 边 体育 浓 二 询 ”NBA 半 事 。 定 球 联赛 免 费 股 和 < 人 P | 
i : ’ 
。 通讯 /位 置 问答 知识 立即 申请 
沽 信和 PI 服务。 移动 联通 基站 
鬼 马 问答 “作文 大 全 ” 问 短 机 酉 人 数字 油污 信 拖 

。 充 信 / 礼 品 卡 新 华 字 扫 ”成 滞 词 此 
活 起 充 信 “京东 E 卡 


* 娱乐 /体育 /问答 


笑话 大 全 ”NBA 赛事 


刀 招募 聚合 供应 商 
。 开 发 工具 “ID / 运费、 流 昌 等 优质 资源 
问答 机 强人 Alexa8i 丰 排名 


图 7-2 ”聚合 数据 首页 


聚合 数据 的 官网 是 https:/www.juhe.cn/ ， 首 页 如 图 7-2 所 示 ， 开 发 
者 可 以 从 中 获取 各 种 实用 的 数据 接口 ， 比 如 IP 查 询 、 万 年 历 等 。 这 些 
接口 有 免费 接口 也 有 付费 接口 。 同 时 聚合 数据 会 不 定期 地 组 织 一 些 活 
动 ， 比 如 本 章 使 用 的 这 两 个 接口 就 是 在 活动 期 间 被 聚合 数据 免费 开放 
出 来 的 。 


本 章 调用 的 两 个 接口 都 需要 传递 由 聚合 数据 分 配给 开发 者 的 
Appkey ° i ke 由 于 篇 
幅 的 关系 就 不 详细 描述 这 个 过 程 了 。 读 者 在 得 到 Appkey 之 后 ， 需 要 按 
照 官网 接口 文档 的 要 求 将 Appkey 加 入 请 求 中 ， 才 能 获取 到 正确 的 数 
据 。 


图 7-3 与 图 7-4 分 别 为 试题 接口 与 答案 映射 接口 的 数据 返回 样 例 ， 读 
者 可 以 先 对 这 两 个 接口 的 数据 格式 做 个 简单 了 解 。 下 一 节 将 详细 介绍 
区 考 App 的 代码 逻辑 和 实现 细 广 。 


L. 
"error_code": 0， 
"reason": "Ok", 
"result": [ 
{ 
"id": 12， 
"question": "这 个 标志 是 何 合 义 ?",// /问题 
"answer": "4",/ / 答 案 
"item1": "前 方 4o 米 碱 束 "， /选项 ， 当 内 容 为 空 时 表示 判断 题 正确 选项 


"item2": "最 低 时 速 40 从 里 "// 选 项 ， 当 内 容 为 空 时 表示 判断 颈 错 误 选 项 

"item3": "限制 4o0 叫 轴 重 "， 

"item4": "限制 最 高 时 速 40 公 里 "， 9 
"explains": "限制 最 高 时 速 40 公 里 : 表示 该 标志 至 前 方 限制 速度 标志 的 路 段 内 ， 机 动车 行驶 速度 不 得 超过 标志 所 元 才 
"url": "http:/ /images.juheapi.com /jztk/ cic2subject1/12.jpg"/ /图 片 url 


图 7-3 ”试题 接口 返回 数据 


"eTTOT Code": o, 
Teason' "SUCCeSS" ， 
"result": { 
IT : 叹 或 者 下 确 "， 
2": "PB 或 者 错误 "， 
3 : i 
a "Ty", 
my" "AB", 
" "AC™, 
各 = "AD", 
" "BC 
"BD", 
CU 
: "ABC", 
: "ABD”", 
: "ACD", 
: "BCD", 
: "ABCD" 


图 7-4 答案 映射 接口 返回 数据 


7.3 ”代码 分 析 


7.3.1 小 程序 的 层 代码 封 流 


小 程序 提供 了 一 个 wx.request 方 法 ， 开 发 者 通过 它 ， 以 发 送 HTTPS 
请 求 的 方式 获取 外 部 数据 。 但 是 它 限 制 了 并 发 数 为 5 个 ， 超 出 后 将 会 报 
错 并 且 阻 止 超 出 的 请 求 发 送 。 代 码 清单 7-1 对 该 方法 进行 了 封装， 其 目 
的 是 : 第 一 将 聚合 数据 的 Appkey 封 装 在 其 中 ;第 二 通过 调用 
wx.showToast 方 法 ， 保 证 在 请 求 过 程 中 阻塞 用 户 的 操作 ， 第 三 确保 如 
果 并 发 量 高 于 5 个 的 时 候 ， 不 会 有 请 求 被 阻止 或 者 失败 。 


代码 清单 7-1 wx.request () 封装 


callNum : 9, // 全 局 变量 ， 表 示 当 前 队列 中 的 异步 请 求 数量 ， 不 得 超过 5 个 
dueryJH : function(args)t{ 
wx.showToast({ 
title: "数据 加 载 中 "， 
icon:"loading", 
duration: 10000 
}); 
var ajaxQueue = queue. getQueue( "wxAjaxQueue"); // 初 始 化 请 求 队列 
var fire = function(){/V/ 在 每 次 请 求 结 束 后 被 调 
if(handle.callNum<5&&ajaxQueue. cal LDackAnia length>0){ 
ajaxQueue .fire();// 触 发 队列 中 下 个 aj ax 请 求 
handle.callNum = handle.callNum+1; 
l } 
4 
var query = function( ){// 请 求 方法 体 
var AppKey = constant.AppKey; 
var Url = args.url,; 
var data = args.datal |{}; 
var complete = args.complete; 
var fail = args.fail,; 
data,key = Appkey; // 集 合 数据 的 Appkey 


wx.request({ 
Url : Url， 


data: data, 
complete:function(resp)t{ 
fire( ); 
if(typeof complete === "function"){ 
complete(resp); 


if(ajaxQueue.getSize( )<=0){ 
wx.hideToast(); 


} 
handle.callNum--; 
} 
, }); 
if(ajaxQueue && ajaxQueue.callbackArray.length>=0){// 程 序 入 口 ， 
ajaxQueue .add(args, query);// 在 队列 中 将 请 求 的 方法 体 和 请 求 参 注 册 ， 并 等 待 调 
fire( ); 


} 
}, 


代码 清单 7-2 是 代码 清单 7-1 中 queue 对 象 的 源码 ， 它 是 确保 并 发 超 
过 5 个 时 ， 没 有 请 求 被 阻止 的 关键 。 这 个 对 象 的 功能 类 似 Jquery 的 
callback 对 象 。 它 通过 原型 链 对 外 提供 了 两 个 方法 ， 一 个 是 queue.add 
W ，， 这 个 方法 是 用 来 将 请 求 的 参数 与 回调 函数 保存 到 一 个 队列 中 。 
另外 一 个 方法 是 queue.fire () ， 这 个 方法 取出 队列 中 的 第 一 个 方法 和 

参数 ， 执 行 并 将 其 移 除 。 


代码 清单 7-2 queue.js 


pA 
*common/js/queue.js 


* 队 列 对 象 
4 


var us = require('.,./../lib/underscore.]js'); 
var queue = function(name ){// 构 造 方法 
this,name = name 
this. callbackArray = = []; 


}; 
queue.prototype = {// 原 型 方法 
getName:function(){ 
return this.name; 


}, 
add:function( ){ 
this.callbackArray.push({ 
callback:us.last(arguments),// 传 递 时 ， 最 后 一 个 参数 为 函数 调 
args: arguments/7 画 数 传 入 参数 


}); 


i 


体 


}, 


fire:function(){// 
var fire0bj = this.callbackArray .shift();// 获 取 当 前 队列 中 的 第 一 个 对 象 
fire0bj .callback(fire0bj.args);// 执 行 


2 
getSize:function(){ 
return this.callbackArray.1length,; 
}, 


}; 


Var queues = { 
wxAjaxQueue:new queue( "wxAjaxQueue") 


了 
var handle = { 
getQueue :function(name ){ 
if(queues[name]){ 
return queues[name]; 


} 
} 
}; 


module.exports = handle; 首 页 


7 站 页 


图 7-5 为 昕 页 的 效 末 图 。 前 页 的 主要 功能 是 提供 各 种 芍 考 科目 的 学 
习 的 入 口 以 及 系统 配置 入 口 。 上 文 已 经 介绍 过 ， 科 目 一 与 科目 四 的 考 
题 练习 页 的 业务 与 用 户 交 互 十 分 相似 ， 所 以 使 用 了 相同 的 页 面 ， 通 过 
给 该 页 面 传递 不 同 考试 科目 、 考 试车 型 还 有 学 习 类 型 ， 来 加 载 不 同 的 
数据 。 


代码 清单 7-3 是 首页 跳 转 科目 一 科目 四 的 学 习 页 的 演 染 代码 ， 由 于 
代码 相似 ， 所 以 只 展示 了 科目 一 的 代码 。 顺 序 学 习 、 模 拟 考试 、 错 题 
本 都 是 通过 goTest 方 法 完成 的 ， 而 且 它 们 的 节点 上 都 有 属性 data- 
testType 和 data-subject。data-testType 用 来 保存 学 习 类 型 ，data-subject 用 
来 保存 考试 科目 。 当 用 户 点 击 这 些 链接 后 ， 后 台 会 将 这 两 个 参数 传递 
到 pages/testtest 页面。 不 过 在 点 击 “ 错 题 本 ”时 除了 这 两 个 参数 以 外 ， 还 
会 把 storage 中 的 错 题记 录 读 取出 来 传递 。 


Wechat 
首页 
科目 1 完成 情况 1. 0% 正确 率 30. 3% 
顺序 学 习 模拟 考试 
错 题 本 更 新 题库 


科目 2 


科目 4 完成 情况 0. 4% 正确 硅 80. 0% 
顺序 学习 模拟 考试 
错 题 本 更 新 题库 


图 7-5 首页 


代码 清单 7-3 ”科目 一 科目 四 演 染 逻辑 


<view class="subject subject1 e1"> 
<view class="l0go-subject"></view> 
<view class="subject-title ei"> 
科目 1 
<block wx:if="{{eliRecord}}"> 
<view class="recordMsg"> 完 成 情况 {{elRecord.complete}} 正确 率 
{{elRecord.correct}} </view> 
</block> 
</view> 
<view class="selection"> 
<view bindtap="goTest" data-testType="order" data-subject="1" 
class="e_selection si1"> 
<view class="inner"><view class="]0go"></view> 
顺序 学 习 
</view> 
</view> 
<view bindtap="goTest" data-testType="rand" data-subject="1" 
class="e_selection s2"> 
<view class="inner"><view class="]0go"></view> 
模拟 考试 
</view> 
</view> 
<view bindtap="goTest" data-testType="error" data-subject="1" 
class="e_selection s3"> 
<view class="inner"><view class="]0go"></view> 
错 题 本 
</view> 
</view> 
<view bindtap="updateExam" data-subject="1" class="e_selection s4"> 
<view class="inner"><view class="]0go"></view> 
更 新 题库 
</view> 
</view> 
</view> 
</view> 


7.3.3 ”答题 页 


图 7-6 为 考试 页 面 的 效 末 图， 从 图 中 我 们 可 以 看 到 该 页 面 的 包含 的 
数据 有 : 考题 、 考 试 科目 、 考 试车 型 、 考 试 类 型 、 当 前 的 完成 进度 
等 。 包 含 的 操作 有 : 选择 答案 、 答 题 、 翻 页 、 结 束 考 试 等 。 这 个 页 面 
的 数据 模型 为 图 7-7， 从 这 张 图 中 我 们 可 以 找到 大 部 分 页 面 所 需 的 数 
据 ， 下 边 对 一 些 特殊 的 字段 做 一 些 解释 。 


WeChat 


cl 科目 1 顺序 学 习 


1. 这 个 标志 是 何 合 义 ? 
A. 小 型 车 车 道 

B. 小 型 车 专用 车 道 

C. 多 乘员 车 辆 专用 车 道 
D. 机 动车 车 道 


1/1229 


Object ftitLe: "", _ webviewId : 8，testNModeL: "ci1", testSubject: "1", testType: “ 砧 杖 册 达 ") 四 
_ WebviewId :08 
current: 18 

Pb examDataIndex: Array[166] 
了 page1l: Object 
name: “page1” 
pageData: null 
pageInfo: Object 
isCurrent: "backup” 
isShow: "hide”" 
> _proto_: Object 
> _proto _: Object 
page2: Object 
name: “page2” 
> pageData: Object 
了 pageInfo: Object 
isCurrent: "current" 
isShow: "show” 
Pp__proto_: Object 
> _proto_: Object 
Pp randRecord: Object 
testModel: "ci1" 
testSubject: "1" 
testType:“" 随 机 测 式 " 
testTypeOrg: “rand” 
title: "" 
total: 1096 


examDataIndex: 本 次 学 习 所 需要 的 全 量 考题 数据 。 比 如 用 户 选 择 
了 C1 车 型 科目 一 的 顺序 学 习 ， 这 个 字段 里 边 就 存储 科目 1 车 型 C1 的 全 量 
题库 。 如 采用 户 选 择 了 随机 考试 ， 系 统 会 调用 考题 接口 ， 获 取 科 目 一 
车 型 C1 题 库 中 的 随机 100 道 题 保 存在 这 个 字段 中 。 如 采用 户 选 择 了 错 题 
本 ， 则 考题 是 通过 参数 传递 的 ， 这 个 参数 是 一 个 由 考题 Id (考题 接口 返 
回 的 每 个 考题 都 有 一 个 Id) 组 成 的 数组 。 得 到 这 个 Id 数组 后 ， 将 其 映射 
成 为 考题 数组 并 保存 在 其 中 。 


pagel/page2， 存 储 当前 页 面 的 考题 数据 ， 这 两 个 字段 会 交替 保存 
该 数据 ， 即 当 一 个 作为 存储 字段 时 ， 另 外 一 个 会 被 置 空 。 这 样 设计 的 


原因 是 答题 页 是 一 个 单 页 面 ， 所 有 的 题目 必须 在 同一 个 页 面 展 示 ， 但 
百 人 台 书 _ . 
十 小 有 


题 页 坪 
次 演 染 完 ， 因 为 太 所 过 多 性 能 很 差 ， 因 此 一 次 只 会 泻 染 一 道 
题 ， 而 且 还 要 考虑 页 面 切 换 的 效 末 。 所 以 在 开发 演 染 方法 时 ， 设 计 了 


两 个 演 染 view， 这 两 个 view 会 交替 展示 考题 。 


代码 清单 7-4 是 答题 页 渲染 的 主要 代码 ， 两 个 演 染 的 view (data- 
block-name="1" 与 data-block-name="2") 分 别 由 pagel 字 段 和 page2 字 段 
演 染 。 这 段 代码 只 十 泻 染 逻 辑 的 框 猴 ， 考 题 的 数据 是 
由 ./component/question-template.wxml 的 模板 生成 ， 这 个 模板 的 泻 染 只 
需要 把 examDataIndex 列 表 中 的 考题 数据 传 入 即 可 。 这 上段 代码 需要 关注 


的 是 泻 染 view 的 两 个 动态 class， 分 别 由 pageInfo.isCurrent 和 


pageImfo.isShow 的 值 来 展示 。pageInfo.isCurrent 是 用 来 表示 这 个 view 是 
否 为 当前 用 户 正在 操作 的 界面 ， 可 能 的 值 有 current、backup， 这 个 class 
并 不 会 控制 页 面 的 样式 变化 ， 只 是 用 来 标识 该 view 是 否 作 为 展示 
view。pageInfo.isSshow 是 用 来 控制 页 面 的 显示 和 隐藏 的 ， 可 能 的 值 有 


show、hide， 这 个 class 不 会 影响 业 逻 辑 。 


代码 清单 7-4 test.wxml 


<view class="dle-body"> 
<view class="test"> 
<view data-block-name="1" class="{{pagel1.pageInfo.isCurrent}} 
{{page1i.pageIinfo.isShow}} page"> 
<template is="question-template" data="{{...page1l}}"/> 


</view> 
<view data-block-name="2" class="{{page2.pageInfo.isCurrent}} 
{{page2.pageInfo.isShow}} page"> 
<template is="question-template" data="{{...page2}}"/> 
</view> 
</view> 
</view> 


代码 清单 7-5 是 用 来 获取 答题 页 显示 层 和 隐藏 层 数据 的 方法 ， 在 开 
发 中 经 常会 遇 到 需要 知道 哪个 view 是 显示 view 的 场景 ， 如 切 题 时 判断 
哪个 页 面 应 该 被 隐藏 ， 哪 个 应 该 被 泻 染 。 页 面 的 变化 就 是 数据 模型 的 
变化 ， 所 以 在 设计 数据 模型 时 要 考虑 到 数据 可 以 描述 页 面 的 所 有 变 
化 ， 在 设计 界面 的 时 候 ， 需 要 覆盖 这 个 数据 模型 的 所 有 变化 ， 而 不 是 
像 开 发 H5 时 ， 通 过 JS 去 改变 DOM 。 


代码 清单 7-5 ”获取 页 面 显 示 层 和 隐藏 层 的 数据 


getPpageData:function(){ 
var pagel1 = us.last(getCurrentPpages()).data.pagel; 
var page2 = us.last(getcurrentPpages()).data.page2;// 得 到 演 染 的 两 个 数据 对 象 
var showPpage={},hidepage={}; 
if(pageli.pageInfo.isCurrent==="current"){//pagei 为 显示 数据 
ShowPage = { 


name:"pagel1", 
data:pagel 


hidepage = { 
name:"page2", 
data:page2 


}else if(page2.pageInfo.isCurrent==="current"){//page2 为 显示 数据 
showPage = 
name:"page2", 
data:page2 


hidepage = { 
name:"pagel1", 
data:pagel 
}; 


return {f// 调 用 者 可 以 通过 这 个 方法 获取 当前 显示 层 和 隐藏 层 的 数据 
ShowPage :ShowPage， 
hidePage:hidePage 
}; 


代码 清单 7-6 生 用 来 根据 页 码 值 获取 考题 的 代码 。 由 于 系统 一 次 只 
会 泻 染 一 道 题 在 页 面 上 ， 所 以 会 经 党 有 题目 查询 的 需求 。 不 论 用 户 选 
择 的 答题 模式 是 顺序 学 习 、 模 拟 考试 还 是 错 题 本 ， 保 存在 
exmDataIndex 字 段 中 的 考题 列表 的 数据 格式 是 相同 ， 页 码 的 值 本 质 束 
征 当 前 考题 在 考题 列表 中 的 编号 ， 所 以 本 方法 吏 是 从 这 个 数组 中 根据 
编号 ， 获 取 考 题 数 据 。 


代码 清单 7-6 ”根据 页 面 标号 获取 考题 


getQuestionByPageNum:function(nextPageNum){ 
var examData = _fn.getExamIndex();// 从 数据 模型 中 得 到 泻 染 题 列表 
if(nextPageNum-1>=0 && nextPageNum-1<=examData.length)t{ 
var question = examData[nextPageNum-1]; 
duestion,index = nextPageNum; 
return 区 
question:question, 
total:examData.1length, 
current :nextPageNum 


}; 
}elsef 
return false; 


下 边 将 介绍 考题 泻 染 的 业务 逻辑 ， 图 7-8 古 演 染 的 数据 ， 其 中 大 部 
分 为 考题 数据 ， 还 有 一 些 数据 是 在 用 户 的 操作 过 程 中 产生 的 。 
“answer: 本 题 的 答案 编号 ， 系 统 会 用 这 个 编号 与 答案 映射 接口 返 


回 的 数据 做 匹配 ， 从 中 找到 该 题 对 应 的 答案 选项 ， 图 7-8 中 表明 该 题 的 


答案 为 D。 


:correctAnswerMap: 答案 的 数据 化 ， 这 个 数据 最 终 会 泻 染 到 相应 


的 答案 上 ， 用 作 高 亮 正 确 答案 和 标记 用 户 是 否 答题 正确 。 
judgRes， 答 题 是 否 正 确 的 判断 。 


lockQuestion: 用 户 对 该 题 的 操作 锁 ， 在 用 户 提交 答案 后 ， 这 个 值 
束 会 灾 为 tue， 表 示 用 户 不 可 再 答题 。 


-showExplains: 是 否 显示 正确 答案 以 及 解释 ， 在 用 户 答题 错误 后 ， 


这 个 值 会 变 为 true 0 


userSelect， 用 户 的 选项 数据 化 ， 这 个 数据 最 终 会 演 染 到 相应 的 答 
案 上 ， 用 作 高 亮 用 户 当前 的 选择 。 


代码 清单 7-7 是 考题 泻 染 的 逻辑 。 考 题 页 面 可 以 分 为 三 个 状态 ， 分 
别 为 页 面 初始 化 、 用 户 选 中 答案 、 用户 提交 答案 三 个 阶段 。 初 始 化 状 
态 就 是 用 户 在 页 面 上 未 做 任何 操作 ， 只 展示 考题 和 考题 选项 ， 此 时 的 
泻 染 数据 只 有 题目 和 答案 选项 。 考 题 泻 染 完成 后 ， 用 户 可 以 点 击 选项 
使 页 面 发 生变 化 ， 此 时 的 泻 染 数 据 添加 了 userSelect 对 象 。 此 处 需要 注 
意 ， 虽 然 小 程序 模板 的 泻 染 数据 需要 父 页 面 传 入 ， 但 事件 是 可 以 与 父 
页 面 共 用 一 个 page 对 象 的 。 第 三 个 状态 在 用 户 确定 答案 后 才 会 触发 。 
此 时 会 生成 correctAnswerMap、judgRes、lockQuestion、showExplains 
对 象 对 页 面 进行 泻 染 。 


可 pagel: Object 
name: "pagel" 
¥ pageData: Object 
ansWer: "4" 
¥ correctAnswerMap: Object 
itemil: "in-correct" 
item2: "in-correct”™ 
item3: "in-correct™ 
item4: "correct” 
bproto _: Object 
explains:“ 此 为 机 动车 车 道 ， 比 季 乘 员 车 辆 专用 车 道 少 人 十 ,人 .。" 
id: 1 
index: 1 
让 em1l: “路 型 车 车 道 " 
计 em2:“ 中 型 在 专 用 车 道 " 
item3:“" 华 乘员 车 辆 专用 车 道 " 
让 em4: “机 动车 车 道 " 
judgeRes: false 
lockQuestion: true 
question:“" 这 个 标志 是 何 含 X? " 
showExplains: true 
url: "http://images.juheapi.com/jztk/clc2subject1/1.jpe™ 
¥ Userselect: Object 
iteml: "selected" 
bE proto : Object 
bb proto : Object 


代码 清单 7-7 考题 演 染 


<template name="question-template"> 
<view class="question-view"> 
<block wx:if="{{pageData.url}}"> 
<view><1-- 泻 染 考题 图 片 - -> 
<image class="picture" src="{{pageData.url}}" ></image> 
</view> 
</block> 
<block wx:if="{{pageData.id}}"><!-- 演 染 考 题 文案 - -> 
<view class="question">{{pageData.index}}. {{pageData.question}}</view> 
</block> 
<view class="answers"><!-- 演 染 答案 - -> 
<block wx:if="{{pageData.item1}}"><!-- 选 项 有 三 种 状态 .未 选中 ， 已 选中 ， 判 断后 - -> 


<View class="item-1" data-value="1" data-item-id="{{pageData.id}}" 
bindtap="selectIitem" class="answer-item {{pageData.userSelect.item1}} 
{{pageData.correctAnswerMap.item1}}">A.{{pageData.item1}} </view> 
</block> 
<block wx:if="{{pageData.item2}}"> 
<view class="item-2" data-value="2" data-item-id="{{pageData.id}}" 
bindtap="selectIitem" class="answer-item {{pageData.userSelect.item2}} 
{{pageData.correctAnswerMap.item2}}">B.{{pageData.item2}}</view> 
</block> 
<block wx:if="{{pageData.item3}}"> 
<view class="item-3" data-value="3" data-item-id="{{pageData.id}}" 
bindtap="selectIitem" class="answer-item {{pageData.userSelect.item3}} 
{{pageData.correctAnswerMap.item3}}">C.{{pageData.item3}}</view> 
</block> 
<block wx:if="{{pageData.item4}}"> 
<view class="item-4" data-value="4" data-item-id="{{pageData.id}}" 
bindtap="selectItem" class="answer-item {{pageData.userSelect.item4}} 
{{pageData.correctAnswerMap.item4}}">D.{{pageData.item4}}</view> 
</block> 
</view> 
<block wx:if="{{pageData.id}}"><1!- -提交 答案 按钮 - -> 


<view class="do-answer" data-item-id="{{pageData.id}}" bindtap="doAnswer">7 
et 


E</View> 
</block> 
<block wx:if="{{pageData.showExplains===true}}"><!-- 答 案 解释 ， 用 户 未 提交 答案 ,或 
答案 正确 ， 不 会 显示 ， 只 有 答题 错误 才 会 显示 - -> 
<view class="correct-answer"> 
<view class="answer-msg"><!-- 管 案 选 项 - -> 
正确 答案 : 
<block wx:if="{{pageData.answer===1}}"> 
A.{{pageData.item1}} 
</block> 
<block wx:elif="{{pageData.answer===2}}"> 
B.{{pageData.item2}} 
</block> 
<block wx:elif="{{pageData.answer===3}}"> 
c.{{pageData.item3}} 
</block> 
<block wx:else="{{pageData.answer===4}}"> 
D.{{pageData.item4}} 
</block> 
</view> 
<view class="answer-explain"><1!- -解释 - -> 
答案 释义 : 
{{pageData.explains}} 
</view> 
</view> 
</block> 
</view> 
</template> 


可 | 


代码 清单 7-8 用 来 高 亮 用 户 选 择 的 选项 ， 也 就 是 上 文 说 的 userSelect 
字段 的 生成 方式 。 IE 先 值 为 item1 、item2、 
item3、item4， 分 别 对 应 了 页 面 上 的 A、B、C、D 选 项 ， 用 户 每 次 选择 

项 后 ， 都 会 刷新 这 个 对 象 。 注 意 ， 这 里 需要 考虑 考题 为 多 选 题 的 情 


况 。 标 记 后 ， 用 户 选 择 的 选项 的 key 值 为 selected， 未 选择 的 选项 不 会 存 
入 该 对 象 。 在 这 个 数据 创建 完成 后 ， 会 调用 render.renderCurrentPage 

() 来 刷新 这 个 页 面 。 刷 新 后 ， 被 选中 的 考题 选项 会 多 出 一 个 值 为 
selected 的 class。 本 页 面 的 wxss 会 对 这 个 class 进 行 高 亮 的 样式 处 理 。 


代码 清单 7-8 高 亮 选 中 选项 


hightLightItem:function(questionId,selectValue){ 
var curQuestion = test,.getCcurrentQuestion().question;// 得 到 当前 显示 的 考题 
var isLock = curQuestion.lockQuestion;// 锁 住 回 答 
if(isLock)t{ 
return; 


var questionType = questionService.getQuestionType(curQuestion.answer); 
// 计 算 该 题 是 单 选 还 是 多 选 
Var userSelect = curQuestion.userSelect | |{}; 
if(questionType===1){// 如 果 是 单 选 ， 则 清空 已 经 选 的 选项 

userSelect = {}; 


userSelect["item"+selectValue] = 
userSelect["item"+selectValuel]?false:'selected'; 
curQuestion,userSelect = userSelect;// 构 建 uUserSelect 对 象 
render .renderCurrentPage( ); 


}, 


代码 清单 7-9 是 用 来 判断 当前 用 户 的 答题 结果 是 否 正确 的 代码 。 开 
始 时 系统 会 获取 userSelect 字 段 标记 的 选项 。 之 后 遍历 这 个 对 象 中 的 所 
有 key， 将 key 转 换 成 一 个 数字 ，item1 为 1，item2 为 2，item3 为 3，item4 
为 4， 然 后 将 这 些 数 字 拼 为 一 个 字符 串 (注意 多 选 题 的 情况 ) ， 与 
answer 字 段 对 应 的 答案 映射 接口 处 理 后 的 答案 字符 串 〈 见 图 7-9) 进行 
匹配 ， 如 果 匹 配 成 功 ， 则 判断 当前 答题 正确 。 如 图 7-8 数 据 的 answer 字 
段 为 4， 对 应 答案 映射 接口 的 数据 为 4， 表 示 选 项 D 为 正确 。 判 断 完 成 
后 ， 会 返回 一 个 与 userSelect 相 似 的 对 象 ， 不 同 的 是 ， 会 将 所 有 选项 的 
判断 结果 标记 出 来 。 数 据 创建 完成 后 ， 会 调用 render.renderCurrentPage 


() 方法 刷新 答案 选项 的 class， 正 确 答案 的 class 是 correct， 错 误 为 in- 
correct。 然 后 本 页 面 的 wxss 会 对 有 correct 和 in-correct 的 Jclass 广 点 做 相应 
的 样式 处 理 。 


judge: 


}, 


代码 清单 7-9 ”判断 答案 是 否 正确 


var curQuestion 
Var userSelect = 
var itemiStatus 
Var item2Status 
var item3Status 


var item4Status = 


function(questionId){ 


test.getCcurrentQuestion().question; 


curQuestion. 
userSelect. 
userSelect. 
userSelect. 
userSelect. 


userSele 
item1=== 
item2=== 
item3=== 
item4=== 


// 将 用 户 选 择 的 选项 转换 为 答案 映射 接 
var userAnswerStr = item1Status+item2Status+item3Status+item4Status ， 
= questionService.getQuestionAnswer (curQuestion); 


var correctAnswe 


// 获 取 数 据 映 射 接 


r 


处 理 后 的 答案 数据 


处 理 后 的 


ct || €}; 
'selected'?"1":"", 
‘selected' 2?"2r nn, 
'selected'?"3" :nn 
7 :0 
'selected'?"4":"",; 


CA CH 


字符 串 


curQuestion.correctAnswerMap = correctAnswer .answer0bj 


var judgeRes = fal 


// 如 果 相 辣 则 表示 正确 


If(userAnswerStr 


se 
， 和 否则 为 错误 


==correctAnswer ,answerStr){ 
judgeRes = true; 


curQuestion,judgeRes = judgeRes; 


record ,doRecord( 


{ 


questionId:questionId, 
judgeRes:judgeRes 


* 
return judgeRes,; 


[“1， “1 ] 7/A 或 正确 
["2", "2"],//B 瑟 条 1 
[“3™],//C 

| 4” | 下 / / D 
[~12™],//AB 
[~13™],//AC 
[~14™],//AD 
0 
[™“24™],//BD 
["34™],//CD 
["123”] ,7/ /ABC 
[~124"™ ] ,//ABD 
["134™],//ACD 
["234™],//BCD 
["1234™]//ABCD 


图 7-9 处 理 后 的 答案 映射 


代码 清单 7-10 征 用 来 刷新 考题 页 数据 的 代码 ， 这 个 方法 会 在 上 文 讲 
到 的 用 户 选 择 答案 以 及 确定 答案 后 被 调用 。 


代码 清单 7-10 ”刷新 当前 页 面 数据 


renderCurrentPage:function(){ 
var curQuestion0bj = test.getCurrentQuestion( );// 获 取 当 前 的 考题 
var curQuestion = curQuestion0bj .question;// 获 取 新 的 泻 染 数据 
if(!curQuestion)f{ 
return false,; 
} 
var pages = _fn,getPageData( ); 
var showPage = pages.showPage;// 获 取 显 示 页 的 数据 
var ShowPageName = ShowPage.name ， 
var ShowPageData = ShowPage.data， 


showPageData.pageData = curQuestion;// 更 新 泻 染 页 的 数据 


newRenderData = 
newRenderData[showPageName]=showPageData， 
newRenderData.total = curQuestion0bj.total;// 更 新 页 码 数 据 
newRenderData.current = curQuestionobj,current 
getCurrentPages()[69].setData(newRenderData) ;// 泻 染 
return true 


}, 


代码 清单 7-11 是 用 来 处 理 用 户 点 击 下 一 页 的 代码 ， 因 为 在 页 面 切换 
的 时 候 会 留 有 0.5 秒 的 延迟 ， 在 这 0.5 秒 期 间 ， 是 不 允许 用 户 继续 做 翻 页 
操作 的 。 所 以 使 用 变量 pageLock 来 锁 住 翻 页 操作 。 这 个 锁 会 在 翻 页 完 
成 后 解 开 。 之 后 的 renderrenderNextPage () 方法 用 来 将 数据 刷 入 考题 
隐藏 页 。 但 是 这 个 方法 并 没有 做 页 面 效 果 的 切换 ， 只 返回 了 一 个 执行 
结果 ， 如 果 为 true 时 ， 会 执行 render.exchangeShowHide () 方法 ， 这 个 
方法 就 是 执行 页 面 切换 转换 ， 显 示 隐 藏 考题 页 状态 的 方法 ， 将 
pageLock 设 为 false 也 是 在 这 个 方法 中 执行 的 。 


代码 清单 7-11 翻 页 代码 


goNext :function(){ 
if(pageLock){ 
return; 


pageLock = true; 
if(render.renderNextPage()){ 
render .exchangeShowHide( ); 
} 
}, 


代码 清单 7-12 生 用 来 处 理 切 换 考 题 的 代码 。 该 方法 衣 先 获取 当前 题 
目的 下 一 道 题 ， 然 后 将 考题 传递 给 render.exchangePageContent () 方 

这 个 方法 的 主要 逻辑 是 将 传 入 的 考题 数据 ， 演 染 到 当前 隐藏 考题 
页 中 ， 将 显示 考题 页 数据 清空 。 


代码 清单 7-12 ”切换 考题 


renderNextPage:function(){ 
// 从 examDataIndex 中 获取 当前 题目 的 下 一 道 题 
var nextQuestionobj = test.getNextQuestion(); 
// 将 这 道 题 泻 染 在 页 面 上 
return render .exchangePagecontent (nextQuestionobj ) ， 
] 
exchangePageContent:function(question){ 
var newQuestionobj = question,; 
var newQuestion = newQuestionO0bj.question,; 
if(!newQuestion)f{ 
return false; 


} 

// 获 取 显示 页 和 隐藏 页 的 数据 
var pages = _fn,getPageData( ); 
var ShowPage = pages.showPpage,; 
var hidePage = pages.hidepage; 
var ShowPageName = ShowPage.name ， 
var ShowPageData = ShowPage.data， 
var hidePageName = hidePage,.name 
var hidePageData = hidePage.data; 


if(!showPpageData.pa geData)t 
// 页 面 初始 化 第 次 被 ， 两 个 层 都 没有 被 泻 染 ， 就 选 当前 的 显示 层 
showPageData.pageData = ee 
hidePageData.pageData = null; 

}elsef 
// 第 一 次 之 后 的 泻 染 ， 就 选择 当前 的 泻 染 层 泻 染 
hidePageData.pageData = newQuestion; 
showPageData.pageData = null; 

} 

newRenderData = {}; 

newRenderData[showPageName]=showPageData; 

newRenderData[hidePageName]=hidePageData， 
newRenderData.total = newQuestion0bj.total; 
newRenderData.current = newQuestionobj,current ' 
getCurrentPpages()[0].setData(newRenderData); 
return true; 


}, 


代码 清单 7-13 是 用 来 实现 翻 页 效果 的 代码 ， 基 本 原理 下 是 将 两 个 
page 对 象 的 pageInfo (如 图 7-10 所 示 ) 的 值 互 换 。 这 里 使 用 了 500 毫 秒 的 


壕 是 因为 该 方法 在 答题 正确 后 会 被 重用 ，500 受 秒 会 给 用 户 一 小 段 时 
间 看 到 目 己 的 答题 结果 为 正确 。 


代码 清单 7-13” 翻 页 效果 


exchangeShowHide:function(){ 

var pages = _fn.getPageData(); 

Var ShowPage = pages.showPpage; 

var hidePage = pages.hidepage; 

var ShowPageName ShowPage ,name ; 

var ShowPageData showPage.data; 

var hidePageName hidePage.name; 

var hidePageData hidePage.data; 

setTimeout(function(){ 
showPageData.pageInfo.isCurrent="backup"; 
hidePageData.pageInfo.isCurrent="current",; 
showPageData.pageInfo.isShow="hide"; 
hidePageData.pageInfo.isShow="show"; 
newRenderData = {0}; 
newRenderData[showPageName]=showPageData,; 
newRenderData[hidepageName]=hidePageData,; 
getCurrentPages()[0].setData(newRenderData); 
// 解 开 考题 锁 
pageLock = false; 

},500); 


VObiject {fname: "pagel”, pageInfo: Object, pageData: nuLLy 
name: "pagel" 
pageData: null 
pageInfo: Object 
isCurrent: "backup" 
isShow: "hide” 
Object 
__: Object 
> getCurrentPages()[98].data.page2 
vObject {fname: "page2”, pageInfo: Object, pageData: Object} 
name: "page2" 
Pb pageData: Object 
pageInfo: Object 
isCurrent: "cyurrent" 
isShow: "show" 
oto : Object 
:Object 


图 7-10 ”pageInfo 对 象 


代码 清单 7-14 征 用 来 实现 统计 数据 的 代码 。 用 户 在 每 次 答题 完成 
后 ， 都 会 将 本 题 的 结果 保存 到 一 个 统计 对 象 中 〈 见 图 7-11) ， 以 供 系 统 
对 用 户 的 模拟 考试 或 者 顺序 学 习 的 成 果 进 行 评 佑 。 关 于 这 个 统计 对 
象 ， 顺 序 学 习 与 随机 考试 有 共同 的 部 分 ， 都 会 将 用 户 完成 的 正确 的 题 
日 编号 与 错误 的 题目 编号 添加 到 统计 对 象 中 。 不 同 的 是 顺序 学 习 会 将 
用 户 的 完成 进度 也 保存 在 storage 中 ， 随 机 考试 则 会 在 页 面 数 据 模 型 
中 ， 另 外 保存 一 个 针对 本 次 考试 的 统计 对 象 ， 同 样 也 只 有 正确 题目 编 
号 和 错误 题目 编号 ， 这 个 统计 对 象 不 会 保存 到 storage 中 。 


randRecord: Object 
Pp Correct: Array[19] 
vinCorrect: Array[36] 
08: 21 


ls 
2: 
$s 
4: 
5: 
6: 
7: 
8: 
9: 


length: 38 
pb __proto_: Array[9] 
pb _ proto : Object 


独 7-11 答题 统计 的 数据 模型 
代码 清单 7-14 ”添加 统计 数据 


doRecord':function(args){ 
var judgeRes = args.judgeRes ; 
var testType = getCcurrentPages()[0].data.testTypeorg ' 
var currentIndex = getCurrentPages()[0].data.current; 
// 从 storage 中 初始 化 统计 对 象 
var orderRecord = examService.readExamRecord({ 
model:getCurrentPpages()[90].data.testModel, 
subject:getCurrentPpages()[0].data.testSubject 


}); 

if(!orderRecord)t{ 
orderRecord = { 
correct:[], 
inCorrect:[], 
lastIndex:0 


}; 


var orderCorrectArr = orderRecord.correct;// 获 取 正 确 序 列 

var orderInCorrectArr = orderRecord,incorrect;// 获 取 错 误 序列 

if(orderCorrectArr.indexof(currentIndex)>=0){ 
orderCorrectArr[orderCorrectArr.indexof(currentIindex)]=""; 
// 清 空 本 题 在 正确 序列 的 记忆 


if(orderInCorrectArr .indexof(currentIndex)>=0){ 


orderInCorrectArr[orderIinCorrectArr.indexof(currentIndex)]=""; 
// 清 空 本 题 在 错误 序列 的 记忆 


} 
if(judgeRes===true){// 正 确 添加 正确 序列 
orderCorrectArr.push(currentIndex); 

}else{// 错 误 添 加 错误 序列 
orderInCorrectArr.push(currentIindex); 


} 
if(testType==="rand'" ){// 答 题 模式 为 随机 考试 
// 初 始 化 统计 对 象 
vr randRecord = getCurrentPages()[90].data.randRecord||{correct:[],inCorrect: 
[]}; 
var correctArr = randRecord.correct,; 
var inCorrectArr = randRecord.inCorrect,; 
if(judgeRes===true)t{ 
// 添 加 到 正确 序列 中 
correctArr .push(currentIndex) ， 
}elsef 
// 添 加 到 错误 序列 中 
inCorrectArr.push(currentIndex); 
} 
getCcurrentPpages()[0].data.randRecord = randRecord; 
}else{// 答 题 模式 为 顺序 学 习 
var orderLastIndex = orderRecord.1lastIndex;// 获 取 答题 进 
// 更 新 进度 数据 
orderRecord, lastIndex = orderLastIndex<currentIndex? 
currentIndex:orderLastIindex; 


} 
// 将 数据 保存 到 storage 中 
examService.saveExamRecord({ 
model:getCcurrentPages()[90].data.testModel, 
subject:getCurrentPages()[90].data.testSubject, 
value:orderRecord 


H 


}); 


7.3.4” 管 题 结 来 页 


图 7-12 是 学 习 结 束 页 ， 用 户 在 顺序 学 习 或 者 模拟 考试 的 时 候 ， 可 
以 通过 点 击 结束 ， 查 看 当前 类 型 学 习 的 成 绩 。 


代码 清单 7-15 是 用 来 泻 染 随机 考试 结束 页 的 代码 。 这 里 需要 注意 
的 是 randRecord 这 个 变量 ， 它 古 在 答题 页 通过 参数 传递 过 来 的 ， 值 就 
是 答题 页 数据 模型 中 的 randRecord 变 量 ( 见 图 7-11) 。 页 面 会 根据 学 习 
类 型 以 及 正确 率 给 用 户 一 个 总 结语 。 代 码 清单 7-16 古 用 来 渔 染 顺序 学 
习 的 结束 页 的 代码 ， 与 随机 考试 不 同 的 是 ， 统 计数 据 对 象 的 命名 变 为 
orderRecord， 而 且 来 源 也 不 是 通过 页 面 参数 ， 而 是 从 storage 中 获取 。 


GC 科目 1 
顺序 学 习 


老司 机 


您 答对 了 128 道 题 中 的 120 道 
正确 率 为 98% 


图 7-12 “学习 结束 页 


代码 请 单 7-15 ”随机 考试 结束 页 泻 染 


renderRandTest:function(param)t{ 
var randRecord = param.randRecord; 


var correctNum = randRecord.correct.length;// 回 答 正确 的 题目 数 寺 


var total = param.testType==="4"?50:100; // 笠 目 4 有 56 道 ， 科 目 1 有 
var percentage = (correctNum * 100 / total). toFixed(2)+'%'; 
var renderData = { 

model : param.model, 

subject : param.subject, 

testType: param.testType==='rand'?" 随 机 测试 " : "顺序 学 习 "， 

title:_fn.getTitle(testType,percentage),// 给 户 一 个 总 结语 

total:total, 

percentage:percentage, 

correct:correctNum, 

record:randRecord 


/ 
us.last(getCurrentPages()).setData(renderData); 


} 


代码 清单 7-16 顺序 学 习 结 束 页 泻 染 


renderOorderTest:function(param){ 
examService.readExamRecord({ 
model:param.model, 
subject:param. subject, 
},function(data)t{ 
var orderRecord = data.data,; 
var correctNum = us.compact(orderRecord.correct).length; 
var total = orderRecord .total， 
var percentage = (correctNum * 100 / total).toFixed(2)+'%'; 


var renderData = { 
model : param.model, 
subject : param.subject, 
testType: param. testType==='rand'?" 随 机 测试 ": "顺序 学 习 "， 
title:_fn.getTitle(), 
total:total, 
percentage:percentage, 
correct:correctNum, 
record:orderRecord 


了 
Us,1Last(getCcurrentPages( )),SetData(renderData) ， 
}); 
} 


pA 


本 草 实例 项 目的 难点 有 两 个 : 


1) 单 页 面 的 设计 与 开发 。 通 过 交替 使 用 两 个 考题 泻 染 字段 实现 了 
一 个 单 页 面 应 用 ， 从 而 实现 了 对 数据 量 很 大 的 页 面 达到 按 需 加 载 的 目 
i 


2) 缓存 的 应 用 场景 。 将 使 用 频率 很 高 并 且 数据 量 很 高 的 数据 保存 
在 缓存 中 ， 诚 少 用 户 的 加 载 等 待 时 间 以 及 流量 的 消耗 ， 同 事 也 提高 
系统 的 稳定 性 。 


第 8 草案 例 分 析 一 一 打 质 


微 信 文 付 是 集成 在 微 信 客户 端的 文 付 功能 ， 用 户 可 以 通过 手机 快 
速 完 成 支付 流程 。 目 前 微 信 支 付 在 实体 行业 和 互联 网 行业 的 在 线 文 付 
领域 占有 很 大 的 市 场 份额 ， 用 户 可 以 通过 扫 码 支付 、App 文 付 、 公 众 
号 支付 等 途径 方便 地 与 商家 交易 。 现 在 微 信 的 传播 途径 又 添加 了 微 信 
小 程序 这 一 利 右 ， 相 信 会 进一步 增加 市 场 对 微 信 文 付 的 需求 。 本 章 通 
过 一 个 简单 的 打 偶 功能 来 展示 微 信 文 付 是 如 何在 微 信 小 程序 中 开发 
的 。 


本 章 的 实例 App 不 会 有 太 多 小 程序 在 用 户 交 互 方面 的 功能 展示 ， 
它 只 完成 了 一 个 主要 功能 ， 吏 是 微 信 文 付 。 用 户 在 进入 App 之 后 ， 可 
以 通过 小 程序 的 登录 接口 和 获取 用 户 信息 接口 得 到 目 己 的 基本 信息 ， 
如 昵称 、 头 像 、 所 在 省 市 等 ， 并 将 其 展示 在 页 面 上 ， 随 后 ， 用 户 可 以 
氮 击 页 面 上 的 打 质 按钮 ， 触 发 客户 端 与 服务 郁 交 互 后 ， 得 到 一 次 微 信 
文 付 的 机 会 ， 用 户 在 完成 文 付 后 ， 再 次 进入 App， 会 看 到 目 己 文 付 过 
的 记录 。 


为 了 使 读者 可 以 更 轻松 地 了 解 后 人 台 是 如 何 与 微 信服 务 句 进行 交互 
的 ， 本 章 的 服务 器 语言 选择 了 Nodejs 进 行 开 发 ， 以 减少 用 户 的 学 习 成 
本 。 


8.1 登录 
8.1.1 登录 流程 


在 讲解 登录 代码 之 前 ， 需 要 先 讲解 一 下 什么 是 登录 态 和 微 信 小 程 
序 登 录 态 〈 以 下 简称 微 信 登录 态 ) 。 登 录 态 束 古 你 目 己 的 服务 器 ， 认 
可 当前 用 户 古 在 目 己 的 用 户 系统 中 存在 ， 而 颁发 给 客户 端的 一 个 香 
证 ， 客 户 端 可 以 市 厦 这 个 凭证 ， 与 服务 右 交 互 。 服 务 此 拿 惠 这 个 登录 
态 后 可 以 找到 目 己 用 户 系 统 的 对 应 用 户 ， 从 而 系统 可 以 给 用 户 提供 某 
些 服务 。 微 信和 登录 仿 束 是 由 微 信和 颁发 给 当前 用 户 的 一 个 凭证 ， 客 成 闻 
可 以 带 着 这 个 凭证 与 微 信 交 互 ， 获 取 用 户 在 微 信 中 注册 的 信息 。 


由 于 微 信 拥有 一 父 十 分 完善 的 用 户 系统 ， 所 以 很 多 互联 网 公司 都 
采用 了 将 微 信 账号 与 目 己 的 账号 系统 相关 联 的 做 法 。 这 样 既 可 以 减少 
用 户 注 册 和 有 登 孙 的 太 烦 ， 也 可 以 增加 目 吴 流量 的 来 产 。 


微 信 登录 开发 大 致 可 以 看 成 两 个 部 分 : 前端 开发 和 后 端 开 发 。 


前 端 开发 主要 是 在 每 次 发 送 请 求 前 检查 用 户 当前 的 storage 中 ， 蚌 
否 保存 了 登录 态 ， 如 果 没 有 保存 ， 则 需要 调用 小 程序 的 接口 ， 获 取 微 
信 登 录 的 code 〈 后 边 会 介绍 code 的 用 途 ) ， 然 后 根据 code 回 服务 器 请 求 
登 示 仿 。 客 户 疹 拿 到 登录 态 后 ， 每 次 同 目 己 服务 娘 发 送 请 求 的 时 候 ， 


需要 携 市 登录 人 态 一 起 发 送 到 服务 器 端 ， 如 果 服 务 句 端 判 断 当 前 的 登录 
态 不 合法 或 者 失效 ， 则 需 客户 端 重新 走 微 信 登录 程序 ， 并 且 疝 目 己 的 
服务 郁 获 取 登 孙 仿 。 


后 只 开发 的 关注 点 在 于 判断 用 户 的 每 次 请 求 中 是 否 携 市 本 系统 的 
登录 态 ， 如 果 有 登录 态 ， 则 验证 该 登录 态 是 否 正确 。 如 果 没有 登录 
态 ， 则 需要 判断 用 户 是 否 已 经 在 微 信 登录 ， 如 果 已 完成 登录 ， 则 使 用 
微 信 登录 code 匹 配 本 系统 的 用 户 ， 并 辐 客 户 站 发 送 登 隶 仿 。 如 采 未 登 
录 ， 则 需要 提示 客户 端 登 录 。 


用 户 每 次 微 信 登录 成 功 之 后 ， 通 过 自己 的 服务 器 向 微 信 服务 器 获 
取 用 户 的 微 信 登录 态 ， 包 含 session_key 和 openId。 请 注意 这 两 个 数据 在 
开发 中 会 经 常用 到 ， 如 果 汇 露 将 涉及 安全 问题 ， 所 以 一 定 要 在 服务 器 
端 获得 并 保存 。 获 取 完 成 后 ， 服 务 需 应 当 将 这 些 信息 与 目 己 的 用 户 系 
统 进行 关联 ， 关 联 成 功 后 ， 需 要 生成 一 个 基于 自己 系统 的 登录 态 ， 
个 登录 态 需 要 考虑 一 些 安全 因素 ， 首 先 要 保证 这 个 登录 人 态 的 随机 性 ， 
还 要 人 证 这 个 登录 仿 要 有 一 定 的 时 效 性 ， 最 后 将 这 个 登录 仿 返 回 给 客 
户 疾 。 图 8-1 古 微 信 官 方 推 荐 的 微 信和 登录 流程 图 。 


wm ' ' 
wx.login() 获取 code | 1 
| 1 

1 


appid + appsecret + code  ， 剧 
se session_key + openid —- 一 一 一 一 一 一 一 T 


注意 : session_key 是 微 信服 务 器 生成 的 针对 用 户 数据 


进行 加 密 签名 的 密 钥 ， 不 应 该 传输 到 客户 庙 


生成 3rd_session 

1 [3ra_session 用 于 第 三 方 服务 器 和 小 程序 之 间 做 登录 态 
校 验 。 为 了 保证 安全 性 ，3rd_session 应 该 式 足 : 
1. 长度 足够 长 。 建 议 有 2^128 种 组 合 ， 即 长 度 为 1683 
2. 避免 使 用 srand{ 当 前 时 间 ) 然后 rand() 的 方法 ， 而 是 
采用 操作 系统 提供 的 真正 随机 数 机 制 。 比 如 Linux 下 面 


读 取 /dev/urandom 设备 ; 
3. 设置 一 定 有 效 时 间 ， 对 于 过 期 的 3rd_session 视 为 不 
合法 


-i 
以 3rd_session 为 key，session_key + openid 为 value， 写 入 session 存 情 


1 
session 存储 可 以 是 Redis、Memcached 之 类 的 kV 存 铺 


|] 


3rd_session 写 入 storage 


后 综 用 户 进入 小 程序 ， 先 从 storage 该 取 


3rd_session 
wx.request() 带 上 3rd_session 一 一 一 一 
1 
根据 3rd_session 在 session 存储 中 查找 合法 的 session_key 和 openid 
外 
1 


-一 


图 8-1 微 信 登 录 流程 


8.1.2 ”源码 讲解 


图 8-2 是 打 赏 系统 的 主页 。 页 面 的 逻辑 比较 简单 ， 用 户 进入 页 面 
后 ， 客 户 端 和 目 动 请 求 后 台 接 口 ， 获 取 用 户 信息 。 如 果 后 台 没 有 该 用 户 
的 信息 ， 则 客户 端 走 微 信 登录 ， 获 取保 存在 微 信 服务 右 中 的 用 户 信 
四 ， 然 后 将 此 信息 传 给 后 侣 。 后 台 保 存 数据 后 ， 将 本 用 户 信息 和 登录 
态 返 回 客户 端 ， 客 户 端 将 该 登录 态 保存 到 本 地 的 storage 中 ， 供 其 他 请 
求 便 用 * 


图 8-2 打 赏 页 面 


代码 清单 8-1 是 index 页 面 的 onload 方 法 。 这 上 段 代 码 的 功能 是 在 进入 
后 ， 先 获取 用 户 信 息 然 后 将 用 户 信息 泻 染 到 页 面 上 ，user.getUserInfo 方 
法 用 于 获取 用 户 信 息 。 


代码 清单 8-1 打 赏 页 入 口 


onLoad: function () { 
console.log('onLoad' ) ， 
user.getUserInfo(function(userInfo){// 得 到 用 户 的 信息 
console.log(userInfo); 
_fn.render({fuserInfo:userInfol );// 将 用 户 信息 展示 在 页 面 上 


代码 清单 8-2 是 user.getUserInfo 的 代码 。 它 接受 一 个 回调 方法 作为 
参数 ， 并 在 成 功 得 到 用 户 信息 后 执行 。 在 这 段 代 码 中 ， 
es 阳 生 的 方法 ， 它 的 本 质 是 包装 了 wx.request 这 
个 小 程序 原生 API。 包 装 这 个 API 的 原因 是 服务 器 提供 的 一 些 请 求 ， 需 
要 客户 诊所 供 存 储 在 storage 中 的 登录 态 ， 登 录 态 的 验证 与 生成 涉及 前 
后 台 比 较 复 杂 的 交互 ， 比 如 客户 端 在 何 时 进行 微 信 登录 ， 何 时 重新 获 
取 登 录 态 等 。 为 了 方便 这 些 逻 辑 的 重用 ， 需 要 将 验证 和 生成 登录 态 的 
逻辑 与 发 送 请 求 的 逻辑 抽象 在 一 个 方法 中 。 


代码 清单 8-2 ”getUserInfo 代 码 


getUserInfo:function(callBack){ 
var Url = constant.host + constant.path.getUserInfo;// 请 求 地 址 
USer .wxUserRequest({ 
url:url 


},function(data)t{ 
if(typeof callBack === 'function'){ 
callBack(data); 


»)} 

代码 清单 8-3 是 userwxUserRequest 的 代码 ， 它 接受 两 个 参数 ， 
option 和 callBack。option 包 含 的 信息 有 请 求 的 Un 和 请 求 需 要 传递 的 参 
数 。callBack 是 请 求 成 功 后 的 回调 函数 。 方 法 开始 时 ， 通 过 
weixin.getSessionId (下 文 介绍 ) 获取 用 户 的 登录 态 ， 这 个 方法 会 保证 
返回 一 个 用 户 的 登录 人 态 。 得 到 登录 人 态 之 后 ， 它 将 与 用 户 传 递 的 请 求 参 
数 合并 ， 发 送 到 客户 痊 。 当 请 求 返 回 后 ， 如 有 果 没 有 网 络 问 题 的 话 ， 则 
开始 检查 服务 赴 的 错误 码 ， 这 个 方法 只 检查 错误 码 为 0001 的 情况 ， 在 
这 种 情况 下 说 明 服 务 器 端 认 为 客户 端 传 递 鸭 登 孙 态 不 合法 ， 这 时 客户 
端 需要 清空 storage 中 的 这 个 登录 态 ， 递 归 这 个 方法 。 再 次 执行 时 ， 
weixin.getSessionId 方 法 会 重新 问 服务 器 请 求 狐 的 登录 态 ， 保 证 第 二 次 
发 送 请 求 时 ， 服 务 絮 会 认为 该 登录 仿 合法 ， 从 而 返回 非 0001 的 错 谋 
码 ， 之 后 便 可 执行 参数 中 的 回调 函数 。 


代码 清单 8-3 ”wxUserRequest 代 码 


wxUserRequest:function(option,callBack){// 封 装 微 信 请 求 
weixin.getSessionId(function(sessionId){// 这 个 方法 会 确保 返回 一 个 登录 态 
if(!sessionId){ 
wx.showModal({ 
title:' 错 误 '， 
contetn:' 获 取 用 户 登 录 态 失败 '， 
showCancel:false 
}); 


return; 


option.data = option.data || 1》}， 
option.data.sessionId = sessionId;// 将 sessionId 与 请 求 参数 合 
wx.request({ 

url:option.url, 


data:option.data, 

complete:function(result){ 
var resData = _fn.checkAjaxRes(result);// 判 断 请 求 是 否 成 功 
if(!resData)t{ 


return; 


} 
if(resData.code==='0001' ){// 服 务 器 认为 登录 态 不 合法 
wxService.setStorage({// 清 空 登录 态 后 重新 执行 。 
key:"sessionId", 
data:null, 
complete:function(){ 
utils.wxUserRequest(option,callBack); 


}); 
}elsef 
if(typeof callBack === 'function'){ 
callBack(resData); 


} 


}); 
});//end 
} 


代码 清单 8-4 是 weixin.getSessionId 的 代码 。 这 个 方法 的 功能 集 获取 
与 返回 登录 态 于 一 身 。 它 只 接受 一 个 回调 函数 作为 参数 ， 这 个 回调 函 
数 只 有 在 成 功 从 storage 中 取得 登录 人 态 后 会 被 调用 。 但 是 storage 中 可 能 会 
没有 这 个 数据 ， 这 时 ， 就 需要 客户 端 向 服务 絮 端 发 送 请 求 (该 请 求 会 
在 下 文 介绍 ) ， 获 取 一 个 新 的 登录 态 。 在 服务 器 返回 新 的 登录 态 后 ， 
客户 端 需要 将 其 保存 在 storage 中 ， 并 且 重 新 调用 这 个 方法 ， 这 样 做 虽 
然 有 些 党 瑛 ， 但 是 可 以 保证 回调 函数 中 的 登录 态 只 会 从 storage 中 获 
取 ， 并 且 该 方法 一 定 会 返回 一 个 登录 态 给 调用 函数 。 


加 服务 需 请 求 新 的 登录 态 之 前 ， 需 要 客户 端 调用 小 程序 的 登录 接 
口 wx.login (返回 值 见 图 8-3) 和 获取 用 户 信 息 的 接口 wx.getUserInfo 
(返回 值 见 图 8-4) 。 调 用 登录 接口 后 会 得 到 一 个 code 值 ， 这 个 值 是 用 
户 进行 微 信 登 孙 的 凭证 ， 只 有 通过 这 个 凭证 才能 拿 到 真正 的 微 信 登录 


。 调 用 获取 用 户 信 息 的 接口 会 得 到 用 户 在 微 信 注册 的 基本 信息 。 调 
用 这 个 接口 的 目的 是 客户 端 不 知道 当前 用 户 是 否 存在 于 目 己 的 用 户 系 
统 中 ， 所 以 客户 端 需要 向 服务 器 传 入 微 信 的 用 户 信息 ， 这 样 ， 服 务 坟 
如 果 判 断 出 用 户 不 在 自己 的 用 户 系统 时 ， 可 以 将 该 用 户 注册 到 用 户 系 


代码 清单 8-4 getSessionId 


getSessionId:function(callBack){ 
var sessionId = wxService.getSstorage('sessionId'); 
if(sessionId&&sessionId.length>0){ 
if(typeof callBack === 'function'){ 
callBack(sessionId); 


} 
}elsef 
weixin.dowxLogin(function(wxLoginRes){// 微 信和 登录 
weixin.getwxUserInfo(function(wxUserInfo){// 获 取 微 信用 户 的 信息 
var param = { 

code:wxLoginRes.code, 
iv:wxUserInfo.iv, 
signature:wxUserInfo.signature, 
rawData:wxUserInfo.rawData, 
encryptedData:wxUserInfo.encryptedData, 


}; 
param = us.extend(param,wxUserInfo.userInfo); 
console.log("param",param); 
var Url = constant ,host + constant.path.getSessionId; 
wx.request({ 
url:url, 
data:param, 
complete:function(data){ 
console.log(data); 
wxService,.setSstorage('sessionId',data.data.sessionId); 
weixin.getSessionId(callBack); 


} 
});//end wx.request 
});//end weixin.getwxUserInfo 
});//end weixin.dowxLogin 


doWxLogin Y Object ferrMsg: "Login:ok", code: "G11im8m2d2yqUVAB1Om2d2Bwk2d2m8m2k"} 
code: "8@llm8m2d2yqUVA80186m2d2Bwk2d2m8m2Kk" 


errMsg: "login:ok”" 
_: Object 


图 8-3 ”wx.login 返 回 的 数据 


encryptedData: “9XOcB9E7LKFeZ4atwd7UnHJIXx]NDLbkwmJlVH94+HA1IPIdtXxfdIKfuhJf+ODX2seBAet]2WC9SFhEoli]TI9qRACL1+OF9k+YfUF5VEaD6U111IRw87C517]47 晶 
errMsg: "getUserInfo:ok" 


iv: "6HgcNZbqCZRURuI6GPM3UA==” 

rawData: "{"nickName":" 力 思 ","gender":1,"language":"zh_CN","city":"Chengdu","province":"Sichuyan”", "country":"CN" 

signature: "fbe1865cbeb54b8e3d3bbfa78c6d2bcb7dba5988”" 

vuserInfo: Object 
avatarUrl: "http://wx. 


,，"avatarUrl":"http:/ 


qlogo.cn/mmopen/vi_32/IrllbeiciaBctlmiaBcyDal7mwmxPV1VLw3dgTBjHvMSP4SrcfLs41KIRib8NDDC6EKLMGo7fGU7dJnkjpLK 


city: "Chengdu” 
country: "CN" 
gender: 1 
language: "zh_CN" 
nickName: “ 边 思 ” 
province: “Sichuan" 
_proto_: Object 
o_: Object 


图 8-4 ”wx.getUserInfo 返 回 的 数据 


下 面 将 介绍 本 案例 登录 的 后 台 代码 ， 代 码 清单 8-5 是 请 
求 /wxapp/getSessionId 的 代码 。 这 个 请 求 是 客户 端 执行 
weixin.getSessionId 方 法 时 ， 在 用 户 本 地 storage 中 没有 登录 态 的 情况 下 
发 起 的 。 这 个 请 求 的 参数 就 是 上 文 提 到 的 微 信用 户 的 基本 信息 和 登录 


任 证 ， 将 这 些 数 据 传 入 userService.getUserWxSessionId 方 法 (下 文 介 
绍 ) ， 在 回调 中 返回 客户 端 新 的 登录 态 


代码 清单 8-5 ”请 求 /wxapp/getSessionId 


router.get('/wxapp/getSessionId',function(req, res, next){ 
var guery = = reg. .guery; // 获 取 请 求 参数 
// 根 据 客户 端 回 传 的 登录 信息 和 用 户 信 息 ， 获 取 一 个 新 的 登录 态 
UserService.getUserwxSessionId(query,function(newSessionId){ 
res,json({// 获 取 登 录 态 成 功 后 ， 将 其 返回 客户 端 
sessionId:newSessionId 


}); 


也 
return; 


}) 


代码 清单 8- ee 代码 。 这 上段 代码 首先 使 用 用 户 
的 微 信 登录 赁 证， 通过 handle.getWxSession (下 文 介绍 ) 方法 从 微 信服 
句 获 取 该 用 户 在 微 信 的 登录 态 ， 该 登录 仿 包 含 三 个 字段 : 


sessionKey、openId、expireDate。sessionKey 是 微 信 分 配给 用 户 的 一 个 
登录 标识 ， 这 个 标识 可 以 用 来 破解 wx.getUserInfo 方 法 返回 的 
encryptedData 中 的 加 蜜 数 据 。 这 个 sessionKey 是 非常 重要 的 数据 ， 不 能 
直接 发 送 给 客户 端 ， 需 要 我 们 将 其 保存 在 目 己 的 数据 库 中 。openId 是 用 
户 针对 当前 小 程序 账号 (appId) 的 唯一 标识 ， 这 个 字段 可 以 作为 我 们 
用 户 系统 与 微 信用 户 系 统 的 关联 ， 我 们 在 设计 系统 时 应 该 考虑 根据 这 
个 openId 得 到 我 们 用 户 系 统 的 用 户 数据 。expireDate 是 sessionKey 的 有 效 
时 间 ， 一 般 是 30 分 钟 左右 ， 与 客户 端的 登录 态 的 有 效 时 间 是 一 样 的 ， 


这 也 是 我 们 验证 客户 器 登录 仿 是 否 合 法 的 标准 。 


在 继续 介绍 该 方法 之 前 简单 介绍 下 本 案例 的 用 尸 系 统 。 图 8-5 与 图 
8-6 分 别 存 储 了 用 户 的 基本 信息 和 登录 态 的 信息 。 用 户 的 基本 信息 来 自 
于 小 程序 方法 wx.getUserInfo 返 回 的 数据 ， 需 要 注意 open_id 也 在 这 个 表 
中 。 除 handle.getWxSession (下 文 介绍 ;返回 的 数据 外 ， 登 录 态 的 信息 
还 体 存 了 一 个 dlient_key， 这 个 值 就 是 客户 端的 登录 仿 数 据 ， 这 个 数据 
需要 保证 严格 的 加 密 程 序 。 最 后 ， 这 两 个 表 钙 通过 open_id 关 联 起 来 
的 。 


再 回 到 getUserWxSessionId 方 法 ， 获 取 完 用 户 的 微 信 的 登录 态 之 
后 ， 系 统 根据 openId 查 询 wxapp_user 表 ， 检 查 这 个 微 信 用 户 是 否 存在 于 
本 地 的 用 户 系统 中 ， 如 果 没 有 ， 则 目 动 将 用 户 注 册 在 本 系统 中 ， 然 后 
将 登录 态 保存 在 wxapp_user_session 中 。 如 果 用 户 已 经 存在 ， 则 直接 根 


据 openId 更 新 wxapp_user_session 中 用 户 登 录 态 信息 。 
handle.updateSessionKey 方 法 兼容 了 保存 与 更 新 wxapp_user_session 表 的 
功能 ， 之 后 将 新 的 客户 端 登 录 态 传递 给 回调 函数 。 


代码 清单 8-6 getUserWxSessionId 


getUserwxSessionId:function(data,callBack){ 
var code = data.code; 
// 向 微 信服 务 器 获取 用 户 的 sessionkey, openId 
handle.getwxSession({code:code},function(wxSessionInfo)t{ 
var openId = wxSessionInfo.openid,; 
Var sessionKey = wxSessionInfo.session _ key; 
data,openId = openId; 
data,.sessionId = sessionkey; 
data,expireDate = new Date( ) ， get Timel WX2eSSLonInEe， expires_in/1; 
// 根 据 微 信 的 openId 获 取 本 地 用 户 系统 中 的 
handle.getUserByOpenId( {openId:openId},function(user){ 
if(!user||user.length<=0){// 如 户 不 存在 ， 则 保存 
handle.saveUser(data, function(){ 
// 更 新 sessionKey 
handle.updateSessionKey(data,function(newSessionId){ 
if(typeof callBack === 'function'){ 
callBack(newSessionId); 


} 

}); 

}elsef// 如 果 户 存 在 ， 直 接 跟 新 sessionKey 

// 更 新 sessionKey 
handle.updateSessionKey(data,function(newSessionId){ 


if(typeof callBack === 'function'){ 
callBack(newSessionId); 


类 型 小 数 点 允许 空 值 ( 
, 。 
name varchar 


province varchar 


clty varchar 


open_id varchar 


avatar_ur| varchar 


图 8-5 ”wxapp_user 表 


名 类 型 小 数 点 。 允许 空 值 ( 


EE 0 E 


sessino_key varchar 


open_id varchar 


0 
0 
expire_date datetime 0 
0 


client_key varchar 


图 8-6 wxapp_user_session 表 


代码 清单 8-7 是 hande.getWxSession 方 法 ， 是 获取 微 信 登录 态 的 代 
码 。 获 取 微 信和 登录 态 需 要 疝 微 信 服务 器 发 送 一 个 https 请 求 ， 地 址 是 


https://api.weixin.qq.com/sns/jscode2session 。 这 个 请 求 接 受 四 个 参数 ， 


appid、secret、grant_type、js_code。appid 与 secret 都 可 以 在 小 程序 账号 
的 后 台 页 面 中 获取 ( 见 图 8-7) ，grant_type 是 固定 值 
authorization_code，js_code 是 调用 wx.login 方 法 返回 的 code (用 户 登 录 
凭证 ) 。 


代码 清单 8-7 getWxSession 


getwxSession:function(data,callBack){ 
try{ 
var jsCode = data.code; 
if(jsCode){ 
var param = { 
appid : constant ,appId, // 小 程序 的 appId 
secret: constant .secret,// 小 程序 的 secretcode 
grant_type:'authorization_code '， 
js_code:jsCode 
}; 
var content = queryString.stringify(param); 
Var option=f{ 
hostname: 'api.weixin.qq.com', 
path: '/sns/jscode2session?' + content, 
method: 'GET' 
}; 
var request = https.request(option,function(data)t 
data.on('data', function(chunk)t{ 
var userInfo = JSON.parse(chunk); 
if(typeof callBack === 'function'){ 
callBack(userInfo); 


}); 


data.on('error', function(err){ 
console.log('RESPONSE ERROR: ' + err); 
}); 
}); 


request.on('error', function(e) { 
console.log('problem with request: ' + e.message); 


}); 


request .end( ); 
}elsef 
console.log("NO code passing"); 


ee 
console.log(e); 


} 


微 信 公 众 平台 小 程序 


开发 沁 D 


AppiID( 小 好 FID) 


AppSecreti 小 查 才 可 向 ) 


feqvest 合 法 城 名 


个 月 内 可 申请 3 次 妖 取 
socket 厨 法 城 名 志 BiEalia 天 > 


uploadFlle 语 法 城 生 


downloadFile 台 法 诚 名 


图 8-7 ”获取 小 程序 的 appId 与 secret 


8.2 ”支付 


在 讲解 文 付 前 ， 移 简单 介绍 下 如 何 开 通 小 程序 的 微 信 文 付 。 首 先 

入 小 程序 账号 的 后 台 ， 来 到 如 图 8-8 所 示 的 页 面 。 如 果 未 申请 过 微 信 
文 付 的 话 ， 页 面 会 显示 “未 开通 ”。 之 后 开发 者 束 要 通过 资料 审核 、 账 
户 验证 、 协 议 签署 三 个 步骤 后 才能 开通 。 需 要 注意 的 是 第 一 步 中 需要 
填写 的 与 企业 相关 的 信息 必须 与 注册 小 程序 账号 时 填写 的 信息 吻合 ， 
否则 会 导致 审核 不 通过 。 在 审核 通过 以 后 用 户 会 得 到 一 个 微 信 商户 乎 
台 的 登 孙 id 与 密码 ， 使 用 这 个 ID 与 密码 进入 微 信 商户 平台 后 ， 会 显示 如 
图 8-9 所 示 的 页 面 。 安 装 证 书后 ， 根 据 页 面 的 提示 ， 创 建 或 修改 API 
key。 请 注意 ， 这 个 key 非 常 重要 ， 请 勿 随便 告知 他 人 。 


图 8-8 微 信 文 付 申 请 


交易 中 心 账户 中 心 产品 中 心 数据 中 心 


深 作 证 书 


待 市 核 任务 


全 你 尚未 安装 操作 证 书 ， 趟 能 进行 敏感 操作 


已 审核 任务 


让 账户 设 车 
商户 信息 
发 树 信 息 
定 核 瑟 秆 
党 信和 群 管理 
员工 账号 管理 


向 支付 申请 


图 8-9 ”修改 文 付 API key 


回 到 案例 讲解 ， 用 户 点 击 打 近 按钮 后 ， 会 进入 文 付 流 程 ， 系 统 会 
提示 用 户 消 费 1 分 钱 。 这 个 过 程 大 致 可 以 分 为 四 个 阶段 。 第 一 个 阶段 是 
用 户 点 击 打 质 按钮 ， 客 户 冰 问 服务 右 获 取 prepay_id。 用 户 委 通过 
wx.requestPayment 调 起 支付 界面 ， 需 要 传 入 prepay_id。 这 个 参数 需要 一 
个 相对 复杂 有 的 流程 从 微 信服 务 絮 获取 ， 所 以 第 二 个 阶段 是 后 合同 微 信 
服务 器 获取 prepay_id， 并 将 客户 端 执行 wx.requestPayment 所 需 的 全 部 参 
数 返 回 客 户 疹 。 第 三 个 阶段 是 前 台 调 起 文 付 界 面 ， 供 用 户 发 起 文 付 。 
第 四 个 阶段 是 在 用 户 支 付 完 成 后 ， 等 待 微 信服 务 絮 的 完成 文 付 回调 请 
求 。 下 边 将 详细 介绍 第 二 阶段 的 开发 。 


代码 清单 8-8 是 获取 prepay_id 的 主要 逻辑 ， 它 首先 检查 用 户 是 否 登 
录 ， 如 果 没 有 登录 ， 则 返回 0001 错 误 码 ， 提 示 客 户 端 重新 登录 ， 获 取 
微 信 登录 态 和 客户 端 登录 态 。 如 果 用 户 已 经 登录 ， 则 执行 


getPaymentInfo 方 法 获取 prepay_id 。 


代码 清单 8-8 ”请 求 prepay_id 的 主要 逻辑 


tr 


yt 
// 检 查 用 户 是 否 登 
userService.checkUserSessionId({sessionId:query.sessionId}, 
function(result){ 

if(!result.isValid){// 未 登录 则 要 求 用 户 登 对 

res.json({ 
code:"0001" 
}); 


return; 


// 获 取 用 户 信息 

userService.getUserUserByCode({code:query.sessionId}, 

function(result)t{ 
getPaymentInfo(result );// 请 求 prepay_id 


ee re 
console.1log(e); 


} 


获取 微 信 的 prepay_id 的 方法 是 向 微 信 服务 器 发 送 一 个 HITPS 请 
求 ， 请 求 地 址 是 https://api.mch.weixin.qq.com/pay/unifiedorder 。 这 个 请 
求 需要 传递 的 参数 有 许多 ， 具 体 可 以 参考 官网 
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php? chapter=9_1 。 开 发 者 在 
开发 过 程 中 要 注意 : 官网 标注 的 必 填 字段 是 必 不 可 少 的 ， 但 是 有 些 非 
必 填 的 字段 ， 在 一 些 特 殊 的 文 付 方式 中 也 是 必 填 的 ， 如 本 例 使 用 的 
JSAPI 支 付 方式 就 要 求 传递 用 户 的 openid， 但 是 这 个 字段 在 官网 文档 上 


并 没有 标记 为 必 填 。 


代码 清单 8-9 是 实现 获取 prepay_id 的 代码 。 这 段 代 码 首先 创建 了 一 

个 wxpay 对 象 ， 这 个 对 象 是 对 微 信 文 付 抽象 出 来 的 一 个 对 象 ， 它 的 创建 

需要 三 个 参数 ， 分 别 为 appid、mch_id (商户 Id) 、partner_key (商户 的 
apikey) ， 在 前 文中 有 介绍 。 这 么 抽象 的 原因 有 两 个 ， 第 一 个 原因 是 在 
各 种 微 信 支付 类 型 中 ， 只 有 这 三 个 参数 是 常量 ， 第 二 个 原因 是 ， 在 正 
式 的 开发 中 ， 这 三 个 参数 应 该 是 保密 的 ， 对 业务 开发 者 应 该 是 
盒 ， 业 务 方 只 需要 传递 其 他 参数 即 可 。 创 建 完 wxpay 对 象 后 ， 调 用 这 个 
对 象 的 createUnifiedOrder 方 法 ， 获 取 prepay_id 的 请 求 承 是 在 这 个 方法 中 
发 送 的 。 请 求 完 成 后 〈 返 回 数据 见 图 8-10) ， 如 果 有 数据 返回 ， 并 且 返 
回 的 return_code=success 以 及 return_msg=ok 时 就 证 明 获 取 prepay_id 成 
功 。 之 后 将 客户 闹 调 起 文 付 页 面 的 参数 回 传 客户 闻 。 


代码 清单 8-9 ”getPaymentInfo 代 码 


var getPaymentInfo = function(userInfo)t{ 
try{ 
Var wxpay = wxPayServicel({ 
appid: constant.appId,//appid 
mch_id: constant ,mchId,// 商 户 Id 
partner_key:constant .apiKey// 商 户 Id 密 码 


console.1og("clientIp "utils,.getClientIP(redq) )， 
WwWXxpay,createUnifiedorder({ 
body:constant .paybody, // 商 品 描述 
out_trade_no:wxpay .md5(new Date().getTime()),// 内 部 商品 订 和 
total_fee:1,// 价 格 
spbill_ create _ip:utils.getCclientIP(req),// 终 端 IP 
notify_url:constant ,notifyUrl, // 通 知 地 址 
trade_type:'JSAPI',// 支 付 类 型 
openid:userInfo. open_ id,// 用 户 openId 
},function(prepayInfo){ 
Var result,; 
if(!prepayInfo){// 请 求 失败 
result = 
code: '1000 ' ， 
errMsg: ' 出 错 啦 ! ， 


el 


I 
屿 


}; 
}else if(prepayInfo.return_code!='success' ){// 接 口 报错 
result = { 


code: '1001'， 
errMsg:prepayInfo.return_msg 


}; 
}else{// 成 功 获 取 prepayId 

result = { 
code:"0000", 

data: {// 前 端 调 起 支付 框 需要 的 参数 
timeStamp :new Date().getTime(), 
nonceStr:payuUtil,.generateNonceString()， 
package:prepayInfo.prepay_id， 
SignType:"MD5"， 


】 
paySign = wxpay.sign(result);// 生 成 签名 
result.paySign = paySign'， 


res.json(result); 


}catcn(e){ 
console.1log(e); 


}; 


xnl xreturn_code><t CDATALSUCGCESS ] 32/return_code» 
return_ msgy><* [CDATALONJ] I>¢ /return_ msg> 
lx*-appid> 
2<Amch_idy> 
nonce_stk2eyrcDhIThCral7RHLHJITSsCK883SQ]J]J><AnmoncE_ str» 


siogn>2<h [CDATATIAASS?7BS E3477BbCDPF2DDE3b6G5A928B] I /5 ign> 

result_code>< [CDATAISUGCCESS J] 19/result_code> 

prepay_ id><+[ICDATNLwx261611252856B469a8dde33hgBe13455577]]2¢/prepay_id> 
trade_type><? [CDATALJSAPI /trade_type> 

zi 由 > 


图 8-10 成功 获取 prepay_id 


代码 清单 8-10 是 生成 签名 的 代码 。 在 获取 prepay_id 的 开发 中 ， 有 一 
个 重要 的 环 广 就 是 生成 签名 ， 笔 者 也 是 在 生成 签名 的 地 方 纠结 了 很 
久 。 生 成 签名 的 具体 步 又 请 参考 官网 的 介 
ee chapter=4 3 ， 在 此 只 通 
个 简单 的 例子 说 明 这 个 步 又， 以 及 开发 者 在 开发 过 程 中 遇 到 微 信 
服务 器 返回 “等 名 错误 ”时 应 该 如 何 排查 问题 。 


代码 清单 8-10 ”生成 签名 的 代码 


WXPay .mix('sign', function(param){ 
var querystring = Object.keys(param).filter(function(key)t{ 


return param[key] !== undefined &&// 排 除 值 为 空 的 参数 
param[key] !== '' &&. 
['pfx'，'partner_key'，'sign'，'key'] .index0f(key)<9;// 排 除 不 参与 排序 的 参数 
}) .sort().map(function(key){// 排 序 : 生成 ur1 参 数 格式 
return key + '=' + param[key]; 


}).join("&") + "gkey=" + this.options.partner_key;// 最 后 将 apikey 放 在 后 边 
return md5(querystring).toUpperCase(); //MD5 加 各 并 转 大 写 
}); 


代码 清单 8-11 到 8-15 以 一 个 模拟 的 实例 说 明了 在 文 付 方式 为 JSAPI 
的 情况 下 生成 签名 的 过 程 。 侦 到 微 信服 务 右 返回 的 错误 信息 为 签名 错 
误 时 ， 可 以 通过 微 信 官 网 提供 的 签名 检测 工具 进行 校 验 (如 图 8-11) 。 
如 条 发现 工 具 返 回 的 等 名 与 目 己 代码 生成 的 釜 名 不 一 致 ， 则 有 可 能 是 
自己 的 签名 算法 出 了 问题 ， 如 果 工 具 返 回 的 签名 与 自己 代码 生成 的 一 
致 ， 则 开发 者 应 该 考虑 参数 吓 否 有 不 合法 的 情况 ， 如 appid 或 者 apikey 
不 正确 等 。 


代码 清单 8-11 ”模拟 请 求 数 据 


body: ' 多 点 生 鲜 -网 上 好 超市 
out_trade_no: 'ec15ba59d1a43b4d9fbegd238cc96fe21， 
total fee: 1, 

spbill_create_ip: '127.0.0.1', 


notify_url: 'wx.dmall.com', 

trade_type: 'JSAPI', 

openid: 'openId', 

nonce_str: '1bq207YZ8uasVr6IbXd1v5knLq9XwRXq 
appid: "appid '， 

mch_id: ‘mch_id', 


代码 清单 8-12 字典 序 排列 后 的 数据 


es 
body: ' 多 点 生 鲜 - 网 上 好 超市 '， 


mch_id: "mch_ id'， 

nonce_str: "1bq207YZ8uasVr6IbXd1v5KknLdq9XwRXq '， 
notify_url: 'wx.dmall.com', 

openid: "openId '， 

out_trade_no: "ec15ba59d1a43b4d9fbe0d238cc96fe2 '， 
Spbil]l1_create_ip: '127.0.0.1', 

total fee: 1 

trade_type: 'JSAPI', 


代码 清单 8-13” ”URL 参数 化 的 数据 


appid=appid&body= 多 点 生 鲜 -网 上 好 超市 
&mch_id=mch_id&nonce_str=1bq207YZ8uasVr6IbXdiv5knLq9XwRXq&notify_url=wx.dmall.com& 
openid=openId&out_trade_no=eci5ba59d1a43b4d9fbe0d238cc96fe2&spbill]_create_ ip=127.0 
.0.1&total fee=1i&trade_type=JSAPI 


代码 清单 8-14 ”添加 APIKEY 的 数据 


appid=appid&body= 多 点 生 鲜 -网 上 好 超市 
&mch_id=mch_id&nonce_str=1bq207YZ8uasVr6IbXdiv5knLq9XwRXq&notify_url=wx.dmall.com& 
openid=openId&out_trade_no=eci5ba59d1ia43b4d9fbe0d238cc96fe2&spbill create ip=127.0 
.0.1&total fee=i&trade_ type=JSAPI&key=key 


代码 清单 8-15 ”通过 MD5 算 法 得 到 的 数据 


5F62CF23F03920456FF32862CCD7E801 


8.3 小结 


本 章 实例 主要 讲解 了 两 个 功能 点 : 


1) 小 程序 的 登录 API 以 及 后 台 用 户 系 统 的 开发 ， 读 者 可 以 了 解 到 
如 何 将 目 己 的 用 户 系统 与 微 信 的 用 户 系统 结合 ， 实 现 使 用 微 信和 账号 登 
杂 本 系统 的 功能 。 


2) 小 程序 的 支付 API 以 及 微 信 的 支付 API 的 使 用 ， 读 者 可 以 了 解 使 
用 微 信 支付 的 基本 流程 。 


ED 


appid 


mch_id : mch_id 


body : 多 点 生 鲜 -网 上 好 超市 


nonce_str : lbq207YZ8uasVr6IbXdlv5knLq9XwRXq 


notify_url : wx.dmall.com 


openid : openld 


out trade_no : ecl5ba59d1a43b4d9fbe0d238cc96fe2 


spbill_create_ip : 127.0.0.1 


total fee 


trade_type 


key 


增加 参数 


#1. 对 参数 按照 key=value 的 格式 ， 井 按照 参数 名 ASCI 宇 和 典 序 排序 生成 字符 囊 : 

appid=appid&body= 多 点 生 鲜 -网 上 好 超市 &mch_id=mch_id&nonce_str=1bq207YZ8uasVr6IlbXdlv5knLq9XwRXq8notify_url=wx.d 
mall.com&openid=openld&out trade_ no=ecl5ba59d1a43b4d9fbe0d238cc96fe2&spbill_create_ip=127.0.0.1&total fee=1&trade_ 
type=JSAPI 


#2. 连 接 商户 key : 

appid=appid&body= 多 点 生 鲜 -网 上 好 超市 &mch_id=mch_id&nonce_str=1bq207YZ8uasVr6IbXdlv5knLq9XwRXq&notify_url=wx.d 
mall.com&openid=openld&out trade_no=ecl5ba59d1a43b4d9fbe0d238cc96fe2&spbill_create_ip=127.0.0.1&total fee=1&trade_ 
type=JSAPI&key=key 


#3.md5 编 码 井 转 成 大 写 : 
5F62CF23F03920456FF32862CCD7E801 


图 8-11 ” 微 信 签名 校 验 工具 


第 9 革 ” 肥 例 分 析 一 一 日 程 表 

随 着 社会 节奏 的 变 快 ， 人 们 的 生活 内 容 变 得 更 加 充实 ， 我 们 在 他 
受 丰 富 多 彩 生 活 的 同时 ， 也 饱 受 手忙脚乱 市 来 的 烦恼 ， 所 以 一 款 基 于 
日 程 管理 功能 的 App 便 是 解救 < 大忙 人 ”的 日 常 必 备 。 本 章 的 练习 项 目 
是 日 程 表 ， 该 项 目的 主要 功能 是 计划 和 管理 自己 的 日 程 。 通 过 本 章 的 
学 习 ， 读 者 可 以 进一步 了 解 如 何 开发 和 设计 复杂 的 基于 微 信 小 程序 的 
App。 本 项 目的 源码 地 址 为 https://github.com/wxapp-book/calendar.git 。 


9.1 业务 流程 


日 程 表 App 包 括 3 个 页 面 : 首页 、 日 程 详情 页 、 管 理 页 。 下 面 将 分 
别 介绍 各 个 页 面 的 主要 功能 。 


首页 ( 见 图 9-1) : 系统 的 入 口 页 面 ， 分 为 三 个 区 域 : 日 期 区 域 ， 
日 历 区 域 和 日 程 区 域 。 日 期 区 域 默认 显示 当天 的 日 期 ， 点 击 后 可 以 进 
入 “日 程 管理 页面。 日 历 区 域 显 示 当 月 的 日 历 ， 用 户 可 以 点 选 日 历 上 
的 日 期 刷新 日 期 区 域 的 显示 信息 。 日 程 区 域 提 供 操作 当天 日 程 的 功 
能 。 进 入 页 面 后 ， 系 统 会 目 动 从 缓存 中 读 取 当 天 的 日 程 安 排 ， 读 完 后 
会 根据 这 些 日 程 的 开始 时 间 、 结 束 时 间 ， 以 及 用 户 是 否 标记 该 日 程 已 
经 结束 ， 将 其 分 为 二 个 列表 : 进行 中 日 程 列 表 、 未 开始 日 程 列 表 、 已 
结束 日 程 列表 。 下 面 古 列表 说 明 : 


早报 
结束 10:23 


早 会 
结束 10:23 


品牌 设计 方案 讨论 
结束 10:23 


图 9-1 首页 


“进行 中 日 程 ?列表 包含 了 当前 时 间 晚 于 日 程 开 始 时 间 的 日 程 ， 但 
是 并 不 限制 当前 时 间 早 于 日 程 结 束 时 间 。 这 个 列表 会 把 日 程 的 结束 时 
间 显 示 在 界面 上 。 用 户 点 击 这 些 日 程 后 ， 页 面 底部 会 弹出 浮 层 ， 用 户 
可 以 选择 更 新 日 程 ， 跳 转 的 日 程 详情 页 修改 日 程 信息 。 也 可 以 选择 完 
成 日 程 ， 将 该 日 程 从 进行 中 日 程 列表 中 移 除 。 


“未 开始 日 程 ”列表 包含 了 当前 时 间 早 于 日 程 开始 时 间 的 日 程 。 这 
个 列表 会 把 日 程 的 开始 时 间 显 示 在 界面 上 。 用 户 点 击 这 些 日 程 后 ， 页 
面 故 部 会 弹出 浮 层 ， 用 户 只 有 一 个 选项 就 古 “ 修 改 日 程 "， 点 击 后 跳 转 
日 程 详情 页 修改 日 程 信息 。 


“已 结束 日 程 ”列表 包含 了 用 户 在 “进行 中 日 程 列表 ”中 通过 “完成 日 
程 功能 ”从 该 列表 中 移 除 的 日 程 。 该 列表 不 会 展示 日 程 的 开始 时 间或 者 
结束 时 间 ， 用 户 点 击 后 也 不 会 有 浮 层 弹 出 。 用 户 创 建 的 日 程 在 这 个 列 
表 中 完成 生命 周期 的 闭环 。 


日 程 详情 页 ( 见 图 9-2) : 查看 、 修 改 、 创 建 日 程 。 日 程 详情 页 有 
三 个 入 口 ， 首 页 有 两 个 ， 分 别 为 创建 当天 的 日 程 和 修改 当天 的 日 程 。 
日 程 管理 页 有 一 个 入 口 ， 作 用 是 创建 不 同日 期 的 日 程 。 日 程 详 情 页 在 
创建 或 修改 日 程 后 会 目 动 返回 调用 页 面 。 


日 程 管理 页 面 〈 见 图 9-3) : 页 面 由 两 个 区 域 组 成 ， 日 历 区 域 和 日 
程 区 域 。 日 程 管理 页 只 有 一 个 入 口 ， 首 页 的 日 期 区 域 。 用 户 点 击 该 区 
域 后 ， 会 将 当时 显示 的 日 期 传 入 日 程 管理 页 面 作为 日 程 管理 页 面 日 历 
区 域 的 首选 日 期 ， 并 且 以 该 日 期 为 准 ， 回 后 展示 七 天 作为 可 选 日 期 ， 
用 户 点 击 日 期 后 ， 会 刷 狐 下 方 的 日 程 管理 区 域 ， 并 且 用 户 点 击 页 头 的 
添加 日 程 按钮 ， 会 进入 日 程 详情 页 为 该 日 期 添加 日 程 的。 日 程 管 理 区 
域 是 一 个 表格 ， 一 共有 24 行 ， 代 表 了 一 天 的 24 个 小 时 ， 表 格 的 列 数 是 
根据 该 日 期 日 程 的 多 少 及 日 程 的 时 间 分 布 动态 生成 的 ， 具 体 的 逻辑 会 
在 下 面 功能 点 分 析 小 市 详细 介绍 。 


编辑 事件 
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2016 年 12 月 16 日 周 日 14:00 


2016 年 12 月 16 日 周 日 15:00 


图 9-2 日 程 详情 页 
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图 9-3 “日程 管理 页 


9.2 项目 架构 


9.2.1 功能 总 分 析 


本 项 目的 开发 难点 主要 有 两 个 ， 第 一 是 如 何 存储 日 程 数据 ， 第 二 
是 日 程 管理 页 面 的 日 程 区 域 。 


存储 日 程 数 据 : 本 章 的 练习 项 目 是 一 个 纯 本 地 项 目 ， 没 有 与 服务 
絮 的 交互 ， 所 以 , 日程 数据 部 需要 存储 在 小 程序 的 storage 中 。 由 于 系 
统 需 要 经 常 添加 ， 修 改 和 查询 日 程 ， 所 以 一 套 高 效 和 稳定 的 日 程 存储 
方案 就 是 保证 系统 稳定 的 前 提 。 


存储 一 共 涉 及 了 两 个 对 象 ， 日 期 对 象 和 日 程 对 象 。 这 两 个 对 象 的 
键 值 分 别 以 date_ 和 task_ 开头， 日 期 对 象 会 以 被 创建 日 期 零点 的 晕 秒 值 
作为 结尾 ， 而 日 程 对 象 则 会 以 当前 时 间 的 毫秒 值 作为 结尾 ， 这 样 ， 就 
保证 了 日 期 对 象 和 日 程 对 象 的 唯一 性 。 


在 创建 日 程 之 前 ， 需 要 检查 storage 中 是 否 保 存 了 当前 的 日 期 对 
象 ， 因 为 日 程 需要 与 日 期 关联 起 来 才 会 在 首页 和 日 程 管理 页 被 查询 出 
来 。 而 在 日 期 对 象 中 ， 保 存 一 个 关联 了 当日 所 有 日 程 的 列表 ， 每 当 创 
建 完 日 程 后 ， 需 要 将 该 日 程 的 id 汪 、 加 到 这 个 列表 中 。 


日 程 管理 页 面 的 日 程 区 域 : 这 个 区 域 是 一 个 表格 ， 一 共有 24 行 ， 
代表 了 一 天 的 24 个 小 时 ， 表 格 的 列 数 根据 该 日 期 日 程 的 多 少 及 日 程 的 
时 间 分 布 动态 生成 。 在 癌 表 格 添 加 日 程 的 时 候 ， 会 优先 添加 到 最 左边 
的 列 ， 如 采 该 列 的 相关 时 间 段 没有 其 他 日 程 ， 则 该 日 程 会 被 添加 到 该 
列 ， 如 果 该 列 的 相关 时 间 段 已 有 其 他 日 程 ， 则 需 检 查 右 相 邻 列 的 相关 
时 间 段 是 否 有 其 他 日 程 ， 如 有 宁 所 有 列 相关 时 间 段 都 不 满足 添加 的 条 
件 ， 则 创建 一 个 新 列 添加 这 个 日 程 。 例 如 图 9-3 所 示 ， 第 一 列 与 第 二 
列 ， 都 有 一 个 10: 41 到 11: 41 的 日 程 ， 如 采 这 时 再 添加 一 个 该 时 间 段 
内 的 日 程 ， 则 这 两 列 都 没有 办 法 显示 这 个 日 程 ， 需 要 再 创建 一 个 列 去 
存放 这 个 日 程 。 


9.2.2 ”项目 结构 图 


项 目 结构 如 图 9-4 所 示 。 


v (SS calendar 
v CS common 
= DD css 
vis 
加 constant,js 
service,js 
加 wxjs 
vlib 
因 moment,js 
因 underscorejs 
V CB pages 
v CS create 
create,js 
create,Wxml 
加 Create,wxss 
Vv 巴 daytask 
因 daytaskjs 
daytask,wxml 
加 daytask.wxss 
v CS index 
加 indexjjs 
index.wxml 
加 index,wxss 
和 巴 utils 
四 utiljs 
六 appjs 
因 appjson 
加 app,wxss 


图 9-4 项 目 结构 
下 面 介绍 各 个 部 分 所 承担 的 功能 
common 存 放 一 些 公共 业务 相关 的 代码 ， 其 中 : 


wxjs: 封 雄一 些微 信 小 程序 的 砌 层 API。 在 开发 过 程 中 ， 有 一 些 
奈 层 的 小 程序 API 需 要 我 们 对 其 根据 自身 业务 进一步 封装 的。 


:constant.js: 保存 系统 的 常量 ， 例 如 一 些 常用 的 storage key。 


“service.js: 问 外 提供 了 dateService 和 taskService 两 个 类 ， 这 两 个 类 
的 作用 是 癌 业 务 代 码 提供 了 保存 、 修 改 、 读 取 日 期 和 日 程 的 功能 代 
公 。 


lib 存 放 第 三 方 的 类 库 ， 其 中 : 


-underscore.js: 微 信 小 程序 的 开发 是 基于 数据 模型 的 ， 所 以 ， 会 
有 大 量 的 数据 操作 ， 比 如 列表 查询 ， 数 据 格式 转换 等 工作 。 在 这 里 选 
择 underscore.js 作 为 数据 处 理 的 工具 ， 他 有 很 多 优势 如 十 分 小 巧 ， 压 缩 
后 只 有 4KB; 使 用 方法 简单 ， 它 提供 了 儿 十 种 函数 式 编 程 的 方法 ， 大 
大 方便 了 JavaScript 的 编程 ， 窗 盖 面 广 ， 包 仿 了 操作 集合 、 数 组 、 画 数 
和 对 和 象 的 方法 ， 社 区 人 气 高 ， 不 用 担心 技术 文 持 的 问题 。 


-moment.js: 一 个 功能 非常 强大 的 时 间 操作 工具 。 在 项 目 开发 的 过 
程 中 ， 会 大 量 涉及 日 期 的 操作 ， 如 改变 日 期 的 输出 格式 ， 获 取 下 一 
天 ， 获 取 某 星期 、 某 月 的 第 一 天 和 最 后 一 天 ， 获 取 某 一 天 的 开始 时 间 
的 襄 秒 和 结束 时 间 的 萤 秒 等 ， 这 些 功能 如 果 全 部 目 己 开发 会 非常 耗 
时 ， 而 且 这 些 功 能 不 是 我 们 关注 的 重点 ， 所 以 选择 了 moment.js 作 为 日 
期 的 工具 库 ， 以 便 我 们 更 加 专注 业务 的 实现 。 


pages 存 放 页 面 代 码 ， 其 中 : 
:create: 日 程 详情 页 
-daytask: 日 程 管理 页 。 


.index:， 首页 。 


9.3 ”代码 分 析 


在 日 程 App 里 ， 首 页 与 日 程 管理 页 都 需要 依赖 日 程 数据 ， 而 日 程 
详情 页 不 需要 依赖 任何 数据 ， 并 且 日 程 详情 页 可 以 用 来 创建 日 程 数 
据 ， 所 以 开发 时 选择 该 页 面 作为 入 手 点 。 日 程 管理 页 需要 依赖 首页 为 
其 传 入 参数 ， 而 且 日 程 管理 页 的 开发 难度 较 高 ， 所 以 日 程 管 理 页 放 在 
了 最 后 一 个 去 开发 。 本 章 世 的 讲解 顺序 也 会 按照 这 个 思路 展开 。 


9.3.1 “日 程 详 情 页 


日 程 详情 页 主要 用 于 创建 和 修改 日 程 ， 所 有 和 与 日 程 有 关 的 数据 都 
会 出 现在 这 个 页 面 ， 图 9-5 是 这 个 页 面 的 数据 模型 。 下 面 对 数 据 模 型 中 
的 重要 字段 进行 分 析 。 


:curDate: 当前 日 程 的 moment 对 象 。 在 进入 日 程 详情 前 ， 用 户 需 要 
选择 日 期 或 者 选择 一 个 日 程 。 所 以 本 页 面 只 需 使 用 上 级 页 面 传 递 过 来 
的 日 期 或 者 当前 日 期 即 可 。 


:pageType: 用 来 标记 当前 页 面 是 被 用 作 创建 日 程 还 是 被 用 作 修 改 
日 程 ， 该 字段 有 两 个 可 选 值 : create 和 update 。 


task: 创建 或 者 修改 的 日 程 数 据 ， 同 时 也 是 本 页 面 泻 染 需 要 的 数 
据 ， 包 括 开始 时 间 ， 结 束 时 间 ， 重 要 性 ,日 程 内 容 等 。 这 个 对 和 象 最 后 
会 被 保存 到 storage 中 作为 日 程 数 据 供 首页 和 日 程 管 理 页 调用 。 


-taskImportant: 日 程 重 要 性 选项 。 日 程 重要 性 的 选择 会 通过 小 程序 
的 picker 组 件 去 实现 ， 这 个 字段 中 的 数据 会 作为 这 个 组 件 的 参数 被 使 
用 o 


> getCurrentPages()[1].data 
voObject {_ webviewId : 2, curDate: Moment, task: Object, taskTime: Object, taskIimportant: Array[2].} 
_WebviewId :2 
b curDate: Moment 
pageType: "create”" 
vtask: ee 
date: "2916-12-18” 
ndTime: "14 
ndTimeMs: 1482044160006 
nm__ 各 


startTimeMs: 1482646569696 
title: "新 建 任务 " 
p 


to__: Object 
vta skIm mportant: Array[2] 
9: “一 般 "” 
1;“ 重 要” 
length: 2 
> _proto_: Array[9] 
vtaskTime: Object 
date: "2916-12-18” 
endTime: "14:56" 
endTimeBeginLimit: "13:56" 
startTime: "13:56" 
startTimeBeginLimit: "13:56" 
to_; Object 
D_: Object 


图 9-5 “日程 详情 页 -数据 模型 


taskTime: 为 了 减少 交互 的 复杂 度 ， 用 户 选 择 日 期 的 组 件 同样 选 
a 这 个 组 件 在 作为 时 间 选 择 器 的 时 候 ， 可 以 指定 可 选 时 间 的 
范围 ， 通 过 设置 这 个 范围 ， 丈 避免 了 每 次 提交 日 程 时 去 验证 日 期 是 
合法 的 麻烦 。taskTime 这 个 对 象 就 是 用 来 浴 染 开始 时 间 和 结束 时 间 的 对 
象 。 用 户 每 次 进入 该 页 面 或 者 切换 开始 时 间 时 ， 都 会 触发 这 个 对 象 的 
更 新 ， 然 后 刷新 picker 组 件 的 行为 。 


代码 清单 9-1 是 日 程 详 情 页 加 载 的 代码 ， 这 上段 代码 的 主要 工作 就 古 
初始 化 上 文 提 到 的 五 个 页 面 模型 字段 。 首 和 匈 ， 传 入 该 方法 的 参数 可 能 
有 了 两 个 ，pageType 和 key。 当 pageType 为 create 时 不 会 有 key 传 入 ， 会 初 

化 一 个 默认 的 task 对 象 。 而 当 pageType 为 update 上 时 ， 束 会 有 key 对 象 传 


入 ， 这 时 束 需 要 根据 这 个 key 从 storage 中 获取 对 应 的 task 对 象 供 页 面 泻 
染 所 用 。 


代码 清单 9-1 日 程 详 情 页 加 载 


onLoad :function(option){ 
var pageType = option,.pageType|| "create ' 


Var task 

var curDate 

Re === 'create' ){ 
var ms = _option， ms 1 new Date().getTime(); 
curDate = moment (ms, "x"); 
task = 人 


title: "新 建 程 "， 
important: "一 般 "， 
date:moment(ms, 'x').format("YYYY-MM-DD") 


}; 
}elsef 
var key = option.key; 
if(key)t 
task = taskService.get({key:key}); 
curDate = moment(task.startTimeMs ) ， 


} 


this.setData( {curDate:curDate}); 
var taskTime = _fn. getTaskTime(task); 
var taskImportant = [' 一 般 ', ' 重 要 ']，; 
this.setData({ 

task:task, 

taskTime:taskTime, 

taskImportant:taskImportant, 
a 

了 


代码 清单 9-2 是 刷新 taskTime 对 象 的 方法 。 这 个 方法 会 在 用 户 修 改 
开始 日 期 、 结 束 日 期 或 者 选择 十 否 全 天 日 程 时 被 调用 。 这 段 代 码 的 主 
要 逻辑 是 ， 在 刚 进入 页 面 时 ， 开 始 时 间 和 结束 时 间 分 别 为 当前 时 间 和 
当前 时 间 癌 后 推移 一 个 小 时 ， 在 用 户 修 改 开 始 时 后 ， 如 采 结 束 时 间 早 
于 开始 时 间 ， 则 将 结束 时 间 设 置 为 开始 时 间 辐 后 推移 一 个 小 时 。 日 程 
开始 时 间 的 限制 始终 都 不 能 时 于 当前 时 间 ， 日 程 结束 时 间 的 限制 为 始 
终 都 不 能 早 于 日 程 开始 时 间 。 


代码 清单 9-2 ”刷新 taskTime 对 象 方法 


getTaskTime:function(task){ 
task = task || 人; 
var now = Utils.getPageData( ) .data.curDate 
var dateStr = task.date || now.format('YYYY-MM-DD'); 
var curTask = _fn.getcurTask()||task|| 人 ©; 
var startTime = curTask.startTime?curTask.startTime:now.format ("HH:mm"); 
Var startTimeMoment = moment(dateStr+” "+startTime); 
var endTimeMoment ， 
If(curTask.endTime){ 
endTimeMoment = moment(dateStr+"” "+curTask.endTime); 
if(!endTimeMoment.isAfter(startTimeMoment)){ 
endTimeMoment = moment(startTimeMoment); 
endTime = endTimeMoment.add(1,'h').format("HH:mm"); 
}elsef 
endTime = curTask.endTime; 


}elsef 
endTimeMoment = moment(startTimeMoment); 
endTimeMoment = endTimeMoment .add(1，'h')， 


endTime = endTimeMoment.format("HH:mm"); 
curTask.startTimeMs = startTimeMoment ,Valueof () ， 
curTask.endTimeMs = endTimeMoment ,Valueof( ) ， 


curTask.startTime = startTime; 
curTask.endTime=endTime; 


Var startTimeBeginLimit = now.format("HH:mm"); 
var endTimeBeginLimit = startTime; 


var taskTime = 
startTime:startTime, 
endTime:endTime, 
startTimeBeginLimit:startTimeBeginLimit, 
endTimeBeginLimit:endTimeBeginLimit, 
date:dateStr 


}; 
return taskTime,; 


代码 清单 9-3 是 用 户 点 击 添加 或 者 修改 后 执行 的 代码 ， 这 里 调用 
taskService 的 create 和 update 方 法 去 保存 日 程 数据 ， 保 存 成 功 后 ， 返 回 上 
级 页 面 。 这 里 使 用 了 同步 的 方法 去 保存 日 程 数据 ， 是 因为 保存 完成 后 
会 马上 回 到 上 级 页 面 ， 上 级 页 面 会 立即 读 取 storage 中 的 日 程 数据 。 这 
样 就 需要 保证 缓存 中 的 数据 是 包含 新 添加 的 日 程 数 据 的 。 如 果 采 用 异 


~ 


步 的 方式 ， 是 无 法 保证 这 点 的 ， 导 致 首页 或 者 日 程 管理 页 上 将 看 不 到 
这 条 新 添加 的 日 程 数 据 。 


代码 清单 9-3 ”保存 日 程 事 件 /修改 日 程 事 件 


saveTask:function(e)t{ 
var task = _fn.getCurTask(); 
taskService.creat (task); 
wx.navigateBack({ 
delta:1 
}); 


updateTask:function(e){ 
Var taskkKey = e.target.dataset.taskkey; 
var task = _fn.getCurTask(); 
taskService.update({ 
key:taskkey, 
val:task 


}); 
wx.navigateBack({ 
delta:1 
}); 
} 


代码 清单 9-4 是 在 service.js 中 的 保存 日 程 代码 。 这 段 代码 可 以 分 成 
三 个 部 分 ， 第 一 个 部 分 是 获取 date 对 象 ， 第 二 个 部 分 是 保存 日 程 对 象 ， 
第 三 个 部 分 是 向 日 期 对 象 添 加 日 程 对 象 。 下 边 介 绍 这 三 个 部 分 中 涉及 
的 具体 代码 人 逻辑 。 


代码 清单 9-4 保存 日 程 


creat :function(task){ 

// 第 一 部 分 : 获取 时 间 对 象 

var ms = task,startTimeMs;// 日 程 开始 时 间 的 毫秒 值 

// 读 取 该 之 秒 对 应 缓存 的 日 期 对 象 

var date = dateService.get({ms:ms}); 

Var datekey; 

if(!date){// 缓 存 无 日 期 对 象 则 创建 
dateKkey = dateService.create({ms:ms}); 
date = dateService.get({key:datekey}); 

}elsef 
dateKkey = date.key; 


} 
// 第 二 部 分 : 保存 日 程 对 象 


bh 
如 


Var taskKey = taskService,getTaskKey(moment( ) .Valueof() )， 
task.key = taskKey 
wxService,.setStorage({ 

key:taskkey, 

val:task 


}); a 
// 第 三 个 部 分 ， 向 日 期 对 象 添加 日 程 对 象 
date,taskKeys = date.taskkeys || []; 


date.taskKeys.push(taskkey); 
dateService.update({ 
key:datekey, 
val:date 


在 第 一 部 分 中 ， 需 要 获取 storage 中 日 期 对 象 的 key 值 ， 日 期 对 象 的 
key 值 规定 : 以 date 开头， 以 某 日 期 零 时 的 翅 秒 值 作 为 结尾 。 在 代码 请 
单 9-4 中 ， 通 过 参数 中 的 襄 秒 值 ， 得 到 对 应 的 moment 对 象 ， 又 通过 
moment 对 象 的 startOf 方 法 ， 得 到 对 应 日 期 零 时 的 有 时 秒 值 。 保 存 日 期 时 
获取 key 值 ， 也 是 通过 这 个 方法 得 到 一 个 key 之 后 使 用 这 个 key 傈 存 日 期 
对 象 的 。 只 要 保证 保存 时 和 读 取 时 ， 传 入 该 方法 的 襄 秒 值 在 同一 天 ， 
就 可 以 得 到 相同 的 key 值 ， 如 下 代码 所 示 。 


getDatekey:function(ms)t{ 
var datekey = 'date_'+moment(ms).startof('day').valueof(); 
return datekey; 


在 第 二 部 分 中 ， 需 要 生成 日 程 的 key， 日 程 对 象 的 key 值 规定 ， 以 
task_ 开头 ， 以 创建 时 间 的 毫秒 值 作 为 结尾 。 通 过 这 个 方法 ， 就 可 以 保 
证 日 程 对 象 在 storage 中 的 唯一 性 ， 如 下 所 示 : 


getTaskKey:function(ms)t 
var taskkey = 'task_'+ms; 
return taskkey; 


图 9-6 是 date 对 象 和 task 对 象 在 storage 中 存储 的 截图 。 可 以 发 现 , 日 
期 对 象 中 有 一 个 列表 对 象 taskKeys。 这 个 对 象 就 是 映射 该 日 期 下 关联 的 
日 程 对 象 的 。 保 存 日 程 的 第 三 部 分 就 是 将 新 生成 的 日 程 对 象 的 key 值 添 
加 到 该 对 象 中 。 


cgs Amay [14820471450 432040555086, 148195542592 19 70861 1491942427110] 
date 1481904000000 {ey": “date_l48L904000000", "taskKeys" [task_]481042451720", "task_14619424640E0", "te=k_1461042483330", "task_1431042503220" “task_l481942512584", "ta: L042527187"], "startTsne" :1491004000000, "endTime" :14E1880288 


task_1481942451729 t 斌 仔 务 “inportant” “一般,， “date”:"20160-12-17", "startTimelis :146154240000D “endTimeNs"1401348000000, “startTine” “10 40" 11 40", key” 4 "status"; "finish"] 


task_1481942454050 7 "测试 任务 27 “inportAn1 一般“ "date" “2016-12-17", "stertTimeWs” 14619424000DD ”endTimeWs” 1451945000000 “startTine” “IN 407 “endTi 


task 1481942485839 frtaitla” 测 斌 任务 6 “inpartant 2016-12-11°, "startTimells 1451SEEEECCCD, “andrimafie” 1431950430000, “startTinav "I * tack_1481902486839"} 
task 1481942503220 {title" "MW inportant”  — 般 "， “date" 2016-12-17" "startTimdlc":14E1E4CECCOCD, "ondTimels": 1431987330000, “startTina": 18 41", 村 task_14819425 
task_1481942512584 [it " 测 | 这 eat 一般 rdate "2016-12-197 star tTimells":146154246CCC0, "endTimeis":1431943080000 “startTins”: "10: 4 ,key” task 1491942512564"] 


task_1481942527187 frtitla” 测试 任 务 37 “inportant “一般 "date “2016-12-17", "star tTimels”.140184246CCC0, “endTimeWs“:1451345050000 "startTina": "10 41" anafrlna “ll 41°, key” “task 1401942527107° 


图 9-6 。 storage 中 的 date 对 象 和 task 对 象 


9.3.2 首页 


首页 的 内 容 可 以 分 为 三 个 区 域 ， 日 期 区 域 、 月 历 区 域 和 日 程 区 
域 。 图 9-7 坪 首页 的 数据 模型 ， 下 面 对 其 中 的 重要 字段 作 解 释 : 


:calendar: 演 染 当月 日 历 的 字段 。 这 个 字段 保存 了 一 个 星期 维度 和 
日 期 维度 的 二 维 数组 。 


-days: 显示 星期 几 的 映射 字段 。 


:groupTask: 日 程 区 域 的 洽 染 字段 。 日 程 区 域 会 将 当日 的 日 程 分 成 
三 个 部 分 ， 未 完成 的 日 程 ， 完 成 的 日 程 和 未 开始 的 日 程 。 


selectDate: 日 期 区 域 的 泻 染 字段 。 每 次 用 户 选 择 月 历 区 域 的 日 期 
上 时， 都 会 刷新 这 个 字段 的 数据 。 


< voObject {_webviewId : 9，now: 1482878324451, days: Array[7J，caLendar: Array15]，seLectDaote: Object-) 目 

_webviewId :08 
vcalendar: Array[5] 

> 9: Object 

1: Object 

> 2: Object 

> 3: Object 

> 4: Object 

length: 5 

> _proto_: Array[9] 

vdays: Array[7] 


length: 7 
>__proto_ _: Array[9] 
YegroupTask: Object 
> curList: Array[2] 
> finList: Array[2] 
> penList: Array[2] 
Pp_proto_: Object 
now: 1482679324451 
vselectDate: Object 
date: 19 
isSelect: true 
isToday: false 
key: "2916-12-19” 
month: 11 
ms: 1482676886666 
weekDay: 1 
year: 2916 
Pp_proto_: Object 
> _proto_: Object 


图 9-7 页 面 模型 数据 


代码 清单 9-5 是 首页 加 载 的 代码 ， 这 上 段 代 码 的 主要 逻辑 是 初始 化 页 
面 数据 模型 中 的 字段 。 这 里 调用 了 人 小 程序 的 两 个 生命 周期 函数 : 
onLoad 和 onShow 方 法 。onLoad 方 法 只 会 被 调用 一 次 ， 所 以 这 段 代 码 只 
加 载 了 日 历 和 当天 的 日 期 数据 。onShow 方 法 会 在 每 次 进入 这 个 页 面 时 
被 调用 。 当 该 页 面 是 从 日 程 管理 页 或 者 日 程 详情 页 回来 时 ， 当 天 的 日 
程 数据 有 可 能 发 生变 化 ， 为 了 与 storage 中 的 日 程 数 据 同步 ， 需 要 每 次 


进入 页 重新 读 取 并 生成 groupTask 字 段 ，onShow 中 的 _fn.init 方 法 就 是 执 
行 这 个 过 程 的 。 


代码 清单 9-5 ”页 面 加 载 


onLoad: function () { 

// WwWXService.clearStorage() 

_fn.getCurPpage().setData({ 
now:new Date().getTime(), 
days:constant ,calendar .dayShort， 
calendar :calendar ,getCalendarData( 'm' )， 
selectDate:calendar .getToday() 

}); 


onshow: function( ){ 
_fn.init(); 


代码 清单 9-6 是 获取 页 面 模 型 groupTask 的 字段 。 由 于 首页 的 日 程 区 
域 只 会 显示 当天 的 日 程 ， 所 以 只 需 传递 当天 一 个 毫秒 值 。 在 获取 到 当 
天 的 日 程 列表 后 ， 将 这 个 日 程 列表 按照 其 状态 分 成 三 个 列表 ， 分 别 为 
未 开始 、 未 完成 和 已 完成 。 然 后 将 未 开始 的 日 程 按照 开始 时 间 升 序 排 
列 ， 未 完成 的 日 程 按照 结束 时 间 的 升序 排列 ， 已 结束 的 日 程 按照 结 
时 间 的 降序 排列 。 


代码 清单 9-6 ”获取 演 染 日 程 区 数据 


groupTask:function(){ 
var ms = new Date().getTime(); 
taskService.getDayTasks({ms:ms},function(taskList){ 
var penList = 
taskService.filterTaskByStatus(taskList,constant.taskStatus.pending); 
var curList = 
taskService.filterTaskByStatus(taskList,constant.taskStatus.current); 
var finList = 
taskService.filterTaskByStatus(taskList,constant.taskStatus.finish); 


penList = taskService.orderTaskByStartTime(penList,constant.orderType.asc); 
curList = taskService.orderTaskByEndTime(curList,constant.orderType.asc); 
finList = taskService.orderTaskByEndTime(finList,constant.orderType.desc); 


var groupTask = { 
penList:penList, 
curList:curList, 
finList:finList 


}; 
_fn.getCurPage().setData({ 
groupTask:groupTask 
}); 
}, 


代码 清单 9-7 是 获取 某 日 期 日 程 数 据 的 方法 ， 这 个 方法 位 于 
service.js 的 taskService 对 象 内 部 。 这 个 方法 是 一 个 公共 服务 ， 主 要 实现 
了 通过 一 个 毫秒 值 获取 该 襄 秒 对 应 日 期 内 用 户 创 建 的 日 程 ， 同 时 该 方 
法 提供 了 同步 方式 调用 和 异步 方式 调用 ， 区 别 在 于 是 否 传递 了 callBack 
参数 。 方 法 首先 根据 毫秒 读 取 storage 中 的 日 期 对 象 ， 接 着 遍历 该 对 象 
中 的 taskKeys 数 组 从 而 得 到 该 日 期 下 的 所 有 日 程 key， 然 后 通过 同步 的 
方式 得 到 日 程 对 象 并 将 其 保存 在 一 个 列表 中 。 


代码 清音 9-7 获取 某 日 期 的 日 程 数 据 


getDayTasks:function(option,callBack)t{ 
var ms = option.ms,; 
var getTasks = function(date){// 根 据 日 期 对 象 中 的 taskKeys 对 象 获取 日 程 对 象 
Var taskKeyList = date.taskkeys||[]; 
Var taskList = []; 
for(var i = 0 ; i < taskKeyList.length ; i++){ 
taskList.push(taskService.get({key:taskkKeyList[i]})); 


} 

if(callBack && typeof callBack==='function'){ 
callBack(taskList ); 

}elsef 
return taskList 

} 


}; 

if(callBack && typeof callBack==='function' ){// 异 步 
datesService.get({ms:ms},function(result){// 从 storage 中 得 到 ms 对 应 日 期 对 象 

getTasks(result);// 


}); 

}elsef 
var taskList = dateService.get();// 同 步 
return getTasks(taskList); 


代码 清单 9-8 是 根据 日 程 状态 过 滤 日 程 列表 的 代码 ， 这 个 方法 位 于 
service.js 的 taskService 对 象 内 部 。 为 了 方便 用 户 了 解 当日 日 程 的 进展 程 
度 ， 在 系统 内 部 为 日 程 定义 了 三 个 状态 ， 分 别 为 未 开始 、 未 结束 和 已 

结束 ， 定 义 位 于 constant.js 内 部 。 该 方法 通过 调用 js 的 数组 原生 方法 
Array.filter 去 过 滤 参 数 taskList。 已 结束 的 日 程 是 在 日 程 对 象 上 添加 
status=finish 来 实现 的 。 未 开始 和 未 结束 的 日 程 则 是 根据 当前 时 间 与 日 
程 开 始 时 间 的 前 后 关系 来 决定 ， 在 代码 中 这 个 判断 是 借助 momentjs 的 
isBefore 方 法 和 isAfter 方 法 来 实现 的 。 


代码 清单 9-8 ”根据 日 程 状态 过 滤 日 程 列表 


filterTaskByStatus:function(taskList, status)t{ 
var returnList = taskList,; 
returnList = taskList.filter(function(a){ 
var momentStart = moment (a.startTimeMs );// 日 程 开始 时 间 的 moment 对 象 
var momentEnd = moment(a.endTimeMs );// 日 程 结束 时 间 的 moment 对 象 
var now = moment(); 
var taskStatus = a.status; 
Ifl(constant .taskStatus.pending===Status){ 
if(now.isBefore(momentStart)){// 当 前 时 间 早 于 开始 时 间 
return true; 


HE 


}else if(constant.taskStatus.current===status &&taskStatus !== 
constant ,taskStatus,finish){ 
if(now.isAfter(momentStart)){// 当 前 时 间 晚 于 开始 时 间 ， 户 未 标记 日 程 结束 
return true; 


}else if(constant.taskStatus.finish===status){ 
if(taskStatus === constant.taskStatus.finish){// 用 户 标记 日 程 结束 
return true; 

} 

} 

}); | 
return returnList， 


} 


代码 清单 9-9 是 计算 日 历数 据 的 代码 。 这 上 段 代 码 位 于 utils.js 的 
calendar 对 象 中 。 方 法 的 入 口 为 getCalendarData， 获 取 日 历 的 类 型 分 为 


按 周 获取 和 按 月 获取 。 按 周 获取 月 历 的 方法 是 getWeekData， 该 方法 首 
完 获 取 参 数 旦 秒 值 对 应 周 的 开始 日 期 和 结束 日 期 使 用 的 方法 
momentjs 的 startOf 和 endOf 方 法 ， 同 时 声明 一 个 基准 日 期 为 周 开 始 时 
间 ， 接 下 来 便 是 将 这 个 基准 日 期 按 天 相 加 直到 周 结束 日 期 ， 每 次 相 加 

后 会 判断 相 加 后 的 日 期 是 否 为 今天 并 且 将 其 标记 ,返回 的 结果 是 一 个 
长 度 为 7 的 一 维 数组 。 按 月 获取 月 历 的 方法 是 getMonthData， 这 个 方法 
与 getWeekData 方 法 的 思路 类 似 ， 不 同 的 是 首先 获取 参数 蝶 秒 值 对 应 月 
的 开始 日 期 和 结束 日 期 ， 日 期 递增 的 方式 不 是 一 天 而 是 七 天 ， 最 后 递 
增 到 大 于 或 者 等 于 月 结束 日 期 最 后 运 回 的 数据 是 当月 的 所 有 周 的 数 
据 。 由 于 月 历数 据 是 按照 周 去 计算 日 期 ， 所 以 难免 会 包 合 不 属于 当月 
的 日 期 ， 所 以 在 使 用 月 历数 据 泻 染 页 面 的 时 候 需 要 隐藏 这 些 不 正确 的 
日 期 ， 这 里 使 用 了 font-size=0 的 方式 去 处 理 ， 从 而 减少 了 数据 处 理 和 页 
面 泻 染 的 难度 。 


代码 清单 9-9 ”计算 日 历数 据 


// 获 取 月 历 对 象 的 入 口 函 数 
getCalendarData:function (calendarType,data)t{ 
var now = data || moment() 
var calendarData， 
if(calendarType === 'm' ){// 获 取 一 个 月 的 月 历 
calendarData = calendar. ee 
}else if(calendarType === 'w' ){// 获 取 期 的 
calendarData = calendar. getitekData cnan) ， 


return calendarData， 


}, 

/7 获取 一 周 的 月 历 

getweekData.:; function(time){ 
// 周 上 


var weekStart = moment (time).startof('week'); 
// 周 结束 日 期 


var weekEnd = moment(time). St week' ); 
Var loopMoment = weekStart;// 直 期 
var process = true; 


Var weekDays = []， 
while(process){ 
weekDays.push({ 
year:loopMoment .year(), 
month:loopMoment ,month( ), 
date:loopMoment.date(), 
weekDay:loopMoment .weekday(), 
key:loopMoment.format('YYYY-MM-DD'), 
ms:loopMoment .valueof(), 
isToday:loopMoment.format('YYYY-MM-DD' )===moment().format('YYYY-MM-DD'), 
isSelect:loopMoment.format('YYYY-MM-DD' )===moment().format('YYYY-MM-DD') 


}); 

7/ 如 果 基 准 日 期 等 于 或 者 超过 周 结束 日 期 ， 则 停止 循环 ， 否 则 加 一 天 

if(loopMoment. isSame (weekEnd, 'day')||loopMoment .isAfter (weekEnd))t{ 
process=false,; 

}elsef 
loopMoment.add(1,'day'); 


return weekDays,; 


}, 
// 获 取 一 个 月 的 月 历 
getMonthData:function(time)t{ 
// 月 开始 日 期 
var monthStart = moment(time).startof('month'); 
// 月 结束 
Var onthEn = moment (time). endof (! month"' ); 
var loopMoment = monthSstart;// 基 准 日 期 
var process = true; 
var monthweeks = [}; 
while(process){ 
// 获 取 个 星期 的 数据 
Var weeks = calendar .getweekData(loopMoment); 
monthweeks.push({ 
key:loopMoment.format('YYYY-W' ), 
month:loopMoment .month(), 
weeks:weeks 


}); 

// 将 基准 数据 加 七 天 ， 如 果 等 于 或 者 超过 月 结束 日 期 ， 则 停止 循环 

loopMoment .add(7， "day"); 

if(loopMoment.isSame(monthEnd, 'day')||loopMoment.isAfter(monthEend)){ 
process = false; 


} 


return monthweeks; 


} 


代码 清单 9-10 是 用 户 点 击 首页 日 程 时 触发 的 事件 ， 该 方法 位 于 
index.js 的 初始 化 page 对 象 内 部 。 页 面 在 泻 染 日 程 时 ， 会 将 日 程 的 状态 
和 key 值 泻 染 在 节点 上 边 ， 在 用 户 点 击 日 程 时 ， 这 两 个 值 会 随 事件 参数 
传递 到 本 方法 中 。 这 个 方法 只 会 处 理 状态 为 未 开始 和 未 结束 的 日 程 ， 
未 开始 的 日 程 点 击 后 会 通过 actionSheet 组 件 弹出 修改 按钮 ， 未 完成 的 日 


程 会 通过 actionSheet 组 件 弹出 修改 和 完成 按钮 ， 最 后 ， 不 论 用 户 点 选 
那 种 日 程 或 者 用 户 选 择 actionSheet 中 的 那个 选项 ， 都 是 调用 了 相同 的 回 
调 函 数 handleSelectTask 方 法 操作 日 程 ， 通 过 传递 actionSheet 的 返回 值 和 
日 程 的 状态 来 区 分 用 户 的 操作 。 


代码 清单 9-10 点击 日 程 事 件 


selectTask:function(e){ 
// 日 程 Key 
var key = e.currentTarget.dataset.key; 
// 日 程 的 当前 状态 
var status = e.currentTarget.dataset.status,; 
: 只 展示 修改 按 铅 
if(status === Constant .taskStatus,.pending){ 
WX ， ShowActionSheet({ 
itemList: [" 修 改 "]， 
complete: function(res){ 
if(res.errMsg === 'showActionSheet:ok'){ 
_fn.handleSelectTask(res.tapIndex, status, key); 
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} 
}); 
// 已 开始 的 日 程 : 展示 修改 和 完成 按 
}else if(status === constant.taskStatus.current){ 


wx.showActionSheet({ 
itemList:[" 修 改 ", "完成 "]， 
complete:function(res){ 
if(res.errMsg === 'showActionSheet:ok'){ 
_fn.handleSelectTask(res.tapIndex, status, key); 


代码 清单 9-11 是 操作 日 程 的 代码 ， 在 这 段 代 码 中 一 共 涉 及 两 个 功 
上 ， 一 个 是 去 日 程 详情 页 修改 日 程 数据 ， 另 外 一 个 是 将 用 户 选 定 的 日 
程 状态 设置 为 完成 。 去 日 程 详 情 页 是 通过 方法 fn.goUpdateTask 实 现 
的 ， 逻 辑 是 拼接 日 程 详情 页 的 链接 并 设置 参数 pageType=update 和 key 为 
用 户 远 择 的 日 程 key。 设 置 选 是 日 程 状态 未 完成 的 逻辑 是 ， 先 从 页 面 模 


ml 


型 的 groupTask 对 象 中 读 取 未 完成 日 程 列表 并 从 列表 中 得 到 用 户 选 定 的 
日 程 ， 将 该 日 程 的 status 设 置 为 finish， 将 修改 后 的 日 程 对 象 保存 到 
storage 中 ， 最 后 调用 _fn.init 方 法 ， 同 步 storage 中 当天 的 日 程 数 据 。 


代码 清单 9-11 操作 日 程 


handleSelectTask:function(selectIdx, status, key){ 
// 未 开始 的 日 程 
if(status === Constant .taskStatus,.pending){ 
if(selectIdx===0){// 去 日 程 详情 页 
_fn.goUpdaeTask(key); 


// 未 结束 的 日 程 
}else if(status === constant.taskStatus.current){ 
if(selectIdx===0){// 去 日 程 详情 页 


_fn.goUpdateTask(key); 
}else if (selectIdx===1){// 修 改 程 状态 为 完成 
var taskList = _fn. getcurPpage(). data.groupTask.curList,; 
// 从 groupTask 对 象 中 获取 用 户 j 程 
var task = taskList. filter(function(a)f 

return a.key === key; 
})[9] ; 
task.,status='finish';// 修 改 状态 
// 更 新 storage 
taskService.update({ 


// 重 新 读 取 当 天 的 日 程 数据 
_fn.init(); 


}, 


9.3.3 日 程 管理 页 


日 程 管理 页 分 为 两 个 部 分 :月历 部 分 和 日 程 表 部 分 。 图 9-8 是 日 程 
管理 页 的 数据 模型 ， 下 面 对 其 中 的 重要 字段 作 解 释 : 


calendar: 与 首页 的 calendar 字 段 功能 相似 ， 用 来 泻 染 页 头 的 日 历 
组 件 。 


:curDate: 当前 页 面 默 认 选 择 的 日 期 。 


grid: 用 来 浑 染 日 程 表格 的 数据 对 象 。 这 个 对 象 是 一 个 二 维 数 
组 。 数 组 的 横 轴 表示 表格 的 一 列 ， 每 一 列 的 长 度 都 是 25， 表 示 一 天 的 
24 个 小 时 。 在 这 个 数组 中 ， 有 的 元 素 为 0， 表 示 表 格 中 的 这 个 格子 为 
空 ;， 有 的 元 素 是 一 个 对 象 ， 表 示 表 格 中 的 这 个 格子 是 有 日 程 的 ， 需 要 
演 染 青 景色 ， 这 个 对 象 就 十 storage 中 的 日 程 对 象 。 二 维 数 组 的 纵 轴 表 
示 表 格 的 列 数 。 表 格 的 列 数 是 根据 选 定 日 期 日 程 的 开始 结束 时 间 综 合 
计算 得 来 的 。 


-timeLine: 用 于 生成 24 个 小 时 的 时 间 线 数据 。 


calendar: Array[7] 
bp 90: Object 
b 1: Object 
pb 2: Object 
pb 3: Object 
bp 4: Object 
= 5: Object 
b 6: Object 
length: 7 
Pp _proto__: Array[98] 
> curDate: Moment 
vegrid: Array[4] 
v0: Array[25] 
:0 


DowmhphwN mm 加 
” 国 国 国 国 国 国 国 国 国 


b 22: Object 
> 23: Object 
24: 9 
leneth: 25 
pb _ proto_: Array[9] 
bp 1: Array[25] 
= 2: Array[25] 
3: Array[25] 
length: 4 
Pp __proto_: Array[9] 
Pp timeLine: Array[25] 


图 9-8 ”页面 数据 模型 


代码 请 单 9-12 是 日 程 管 理 页 加 载 的 代码 ， 与 首页 相同 ， 本 页 面 也 
调用 了 人 小 程序 的 两 个 生命 周期 函数 : onLoad 和 onShow 方 法 。onLoad 方 
法 只 会 被 调用 一 次 ， 用 来 初始 化 日 历 和 默认 日 期 数据 。onShow 方 法 会 
在 每 次 进入 这 个 页 面 时 被 调用 。 日 程 详情 页 回来 时 同步 storage 中 的 选 
定 日 期 的 日 程 数据 。 


代码 清单 9-12 页面 加 载 


onShow:function(){ 
_fn.init() 


也 
onLoad:function(param)t 
var ms = param.ms || new Date().getTime(); 
_fn.getCurPage().data.curDate = moment (ms,'x'); 
_fn.getcalendar(); 
* 


代码 清单 9-13 十 初始 化 日 程 表格 数据 的 代码 ， 在 取得 日 程 列 表 
后 ， 调 用 了 getTaskGrid 方 法 。 该 方法 首先 初始 化 了 一 个 只 有 一 个 空 列 
的 表格 数据 。 之 后 加 是 将 日 程 列表 中 的 日 程 数 据 添 加 到 表格 数据 中 ， 
这 里 对 每 个 日 程 都 采用 从 左 到 右 轮 询 日 程 表格 的 方式 ， 检 查 当 前 日 程 
古 否 可 以 添加 到 被 轮 询 的 列 。 如 有 果 可 以 则 将 其 添加 ， 不 可 以 则 继续 轮 
询 ， 如 果 最 后 还 是 不 存在 可 以 存放 的 列 ， 则 创建 一 个 新 列 去 存放 。 代 
码 中 有 两 个 重要 的 变量 : process 和 lineIdx，process 用 来 标记 是 否 继续 
循环 ， 只 有 当 程 序 为 当前 日 程 找到 可 以 存放 的 列 后 ， 该 值 吏 会 变 为 


false 从 而 终 目 while 循环 。lineIdx 是 指 每 次 while 循 环 中 ， 用 于 轮 询 列 的 
编号 。 最 后 日 程 表格 的 数据 格式 就 是 一 个 二 维 数组 。 


代码 清单 9-13 ”生成 日 程 表格 


init:function(){ 
var moment = _fn,getCurPage().data,curDate || moment(); 
_fn.getTasks(moment,function(taskList){ 
_fn.getTaskGrid(taskList); 


了 


getTaskGrid:function(taskList){ 
// 默 认 表格 数据 ， 列 全 部 为 0 
var grid = [[g, 0, 0, 0 09, 9, 0, 0, 9, 0, 0, 9, 90, 9, 0, 0, 9, 0, 0, 9, 0, 0, 
0, 9, 0]]; 
for (var i=0 ;i< taskList.length ; i++){ 
var task = taskList[i]; 
Var process = true; 
var lineIdx = 0;// 当 前 遍历 的 列 序号 
while(process)t{ 
if(!1grid[1lineIdx] ){// 如 果 列 不 存在 则 创建 
grid[lineIdx]=[0, 069, 0, 0, 90, 0, 09, 0, 0, 90, 0, 090, 0, 0, 9, 0, 0, 90, 0, 0, 
0, 0, 9, 0]; 


var line = grid[lineIdx]; 
// 将 日 程 添加 到 列 中 ， 如 果 成 功 结束 结束 循环 ， 不 成 功 则 增加 列 序 号 ， 继 续 遍 历 下 一 列 
var addRes = _fn.addTaskToLink(task,1ine); 


if(addRes === true){ 
process = false; 
}elsef{ 
lineIdx ++; 
} 
} 


} 

// 将 表格 数据 泻 染 到 页 面 上 

_fn.getCurPage().setData({ 

grid:grid, timeLine:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21, 
22, 23, 24] 

}); 


了 


代码 清单 9-14 二 将 日 程 添 加 到 列 的 方法 ， 方 法 的 两 个 参数 task 和 
line 分 别 是 日 程 数 据 和 表格 的 列 数据 。 由 于 表格 的 每 个 格子 都 代表 了 一 
个 小 时 ， 所 以 首先 需要 读 取 日 程 的 开始 时 间 和 结束 时 间 对 应 的 小 时 数 
并 判断 开始 时 间 和 结束 时 间 征 否 相 同 ， 如 采 相 同 ， 页 面 显示 该 日 程 不 


会 超过 一 个 表格 ， 人 否则 会 分 布 在 多 个 连续 的 表格 中 ， 从 而 导致 了 两 种 
不 同 的 显示 方案 。 第 一 种 显示 方案 使 用 到 了 middlePer 和 startPos 两 个 变 
量 ，middlePer 十 指 日程 在 表格 中 的 高 度 ，startPos 则 是 日 程 距离 上 边线 
的 距离 。 第 二 种 显示 方案 则 用 到 了 startPer 和 endPer， 其 分 别 代表 了 日 
程 开 始点 距 表格 下 边 的 高 度 和 日 程 结 束 点 距 表格 上 边 的 高 度 ， 这 些 高 
度 值 是 根据 日 程 开 始 和 结束 时 间 的 分 钟 值 与 60 的 比值 得 来 的 。 在 计算 
完 这 些 样式 所 需 的 数据 后 ， 开 始 检 查 日 程 是 否 可 以 被 添加 到 列 中 。 列 
数据 是 一 个 长 度 为 25 的 数组 ， 数 组 元 素 的 默认 值 为 0， 对 应 的 泻 染 结 
征 一 个 空 表 格 。 检 查 日 程 是 否 可 以 被 淆 加 就 是 利用 了 这 个 特性 ， 检 查 
日 程 的 开始 小 时 到 结束 小 时 之 间 对 应 的 列 数 据 是 否 都 为 0， 是 则 表示 可 
以 添加 ， 否 则 则 返回 false， 通 知 调用 函数 该 列 不 可 以 将 日 程 添 加 其 

中 。 当 判断 该 列 可 以 添加 日 程 后 ， 将 日 程 数 据 ， 样 式 数据 组 成 一 个 对 
象 ， 添 加 到 列 数据 中 ， 并 且 返 回 tue， 通 知 调用 函数 成 功 将 日 程 添加 
i 


代码 清单 9-14 日程 添加 到 列 


addTaskToLink:function(task,1ine)t{ 
var StartTime = moment(task.startTimeMs),; 
var endTime = moment(task.endTimeMs); 
// 日 程 开始 的 小 时 值 
var checkStart = startTime.hour()>=0?startTime.hour():0; 
// 日 程 结束 的 小 时 值 

var checkEnd 人 

分 


Pw 


// 终 点 占 表格 的 各 分 比 
// 中 间 占 表 百分比 


var middlePer ， 

var StartPos ， 

// 开 始点 与 结束 点 在 同一 个 表格 
Ifl(checkStart === checkEnd){ 


StartPos = (1-startTime.minute()/60)*100+'rpx'; 

middlePer = ((endTime.minute() - startTime.minute())/60)*100+'%'; 
}else{// 开 始点 与 结束 点 在 不 同 的 表格 

startPer = (1-startTime.minute()/60)*100+'%"'; 

endPer = (endTime.minute()/60)*100+'%',; 


| 
DD 
HH 


// 如 果 被 检查 列 的 开始 到 结束 的 元 素 中 ， 又 不 是 9 的 元 素 ， 则 该 列 不 能 添加 当 育 
for(var i = checkStart ; i <= CheckEnd ; i++){ 
if(line[i]!==0){ 
return false,; 


} 
// 将 表格 的 开始 到 结束 元 素 全 部 幅 值 为 日 程 数 据 
for(var j = checkStart ; j <= checkEnd ; j++){ 
var isMiddle = checkStart === checkEnd,; 
Var isStart,isEnd; 
if(!isMiddle)t{ 
isStart = j===checkStart; 
isEnd = j===checkEnd; 


line[j] = { 
middlePer:isMiddle?middlePer:null, 
startPos:isMiddle?startPos:null, 
startPer:isStart?startPer:null, 
endPer:isEnd?endPer :null, 

task: task 


}; 


return true; 


代码 清单 9-15 是 渔 染 日 程 表 格 的 代码 。 日 程 表格 是 一 列 一 列 的 渔 
染 完 成 ， 上 文 提 到 ， 列 数据 元 素 的 默认 值 是 0， 演 染 出 来 的 十 一 个 空 的 
格子 ， 如 果 列 元 素 的 值 是 一 个 日 程 对 象 ， 则 向 格子 中 添加 一 个 有 高 度 
的 view 并 用 一 种 颜色 将 其 填充 。 填 充 时 会 涉及 几 个 问题 ， 是 否 将 表格 
填充 满 ? 如 采 不 满 ， 上 边缘 留 日 多 少 ? 下 边缘 留 日 多 少 ? 表格 不 填充 
满 的 情况 一 共有 三 种 : 第 一 种 是 日 程 的 开始 时 间 和 结束 时 间 在 同一 个 
小 时 内 ， 即 整个 日 程 泻 染 在 同一 个 格子 内 ， 日 程 的 上 下 方 都 需要 留 
日 。 这 时 洽 染 该 格子 的 数据 中 会 包 合 middlePer 字 段 作 为 填充 view 的 高 
度 和 startPos 字 段 作为 填充 view 的 上 边 距 。 田 外 两 种 情况 是 在 日 程 泻 染 
多 于 一 个 格子 的 时 候 ， 日 程 的 开始 位 置 需要 上 方 留 日 和 日 程 的 结束 位 


置 下 方 需 要 留 日 。 这 时 演 染 该 格子 的 数据 中 包含 了 startPer 字 段 或 者 
endPer 字 段 ， 这 两 个 字段 都 表示 填充 view 的 高 度 ， 但 前 者 要 求 填充 
view 靠 瓜 部 展示 ， 后 者 要 求 填 充 view 靠 顶部 展示 。 


代码 清单 9-15 ” 演 染 日 程 表格 


<view class="dayTaskwWrapper"> 
<block wx:for="{{grid}}" wx:for-item="gridItem" wx:for-index="gridIdx"> 
<view class="task-column"> 
<block wx:for="{{gridItem}}" wx:for-index="blockIdx"> 
<view class="task-block taskTable-block" bindtap="chooseTime"> 
<block wx:if="{{gridItem[blockIdx]!=0}}"> 
<view data-taskKkey="{{gridItem[blockIdx].task.key}}" class="task 
{{gridItem [blockIdx].startPer?'start':''}} 
{{gridItem[blockIdx] .endPer?'end':''}} {{9gridIitem[blockIdx].task.important==='— 
般 '?'ijmp- ortant_1':'important_2'}} {{gridIitem[blockIdx].task.status}}" 
style="height: 
{{gridItem[blockIdx].startPper||gridIitem[blockIidx].endPer||gridIitem[blockIdx].midd 
lePer}};margin-top:{{gridIitem [blockIdx].startPos}}"></view> 
</block> 
</view> 
</block> 
</view> 
</block> 
</view> 


代码 清单 9-16 是 选择 日 期 事件 的 代码 。 这 段 代码 是 在 用 户 点 击 上 
方 月 历 后 触发 ， 主 要 逻辑 是 高 亮 被 点 钟 的 日 期 ， 同 是 从 storage 中 读 取 
该 日 期 用 户 保存 的 日 程 数据 并 重新 演 染 下 方 的 日 程 表格 。 


代码 清单 9-16 ”选择 日 期 事件 


chooseDate:function(e){ 
var ms = e.currentTarget. dataset. ms; 
_fn. getCurPage( ) ， data.curDate = moment(ms, 'x'); 


var calendar = _fn.getCurPage().data.calendar; 

// 高 亮 被 选中 Ss 

for(var i = 9 ; i < calendar.length ; i++){ 
if(calendar[i].ms === ms*1)f{ 
calendar[i].isSelect = true; 
}elsef{ 


calendar[i].isSelect = false; 


_fn.getCurPage().setData({calendar:calendar}); 
// 重 新 获取 日 程 数 据 
_fn.init(); 


. he 


代码 请 单 9-17 是 选择 日 程 的 代码 。 用 户 在 日 程 表格 中 点 选 日 程 
后 ， 会 根据 日 程 的 状态 在 页 面 底部 弹出 译 层 ， 浮 层 展示 日 程 的 基本 详 
情 以 及 修改 或 者 完成 的 操作 。 


代码 清单 9-17 选择 日 程 


chooseTask:function(e){ 
var key = e.target.dataset. taskkey; 
if(!key){ 
_fn.hideDetailpPop(); 
}elsef{ 
if(_fn.getCurPpage().data.selectTask && 
_fn.getCurPage().data.selectTask.key===key){ 
return; 


} 
taskService.get({key:key},function(res)t 
res.data.curStatus = taskService.getStatus(res.data); 
_fn.getCurPage().setData({ 

selectTask:res.data, 


_fn. showDetailpop( ); 
}); 


下 面 是 跳 转 日 程 详情 页 的 代码 ， 在 本 页 跳 转 日 程 详情 页 创建 日 程 
与 首页 跳 转 该 页 面 创建 日 程 多 传递 了 一 个 需要 创建 日 期 的 量 秒 值 。 达 
到 日 程 详 情 页 可 以 根据 用 户 需 要 创建 不 同日 期 的 日 程 : 


代码 清单 9-18” 跳 转 日 程 详情 页 


addTask:function(e){ 
var ms = _fn.getCurPage().data.curDate.valueof(); 
wx.navigateTo({ 
url:'../create/create?pageType=create&ms='+ms 


}); 


9.4 ”小结 


本 草案 例 项 目的 难点 有 两 个 : 


1) 设计 和 使 用 较为 复杂 的 缓存 ， 在 日 程 表 App 的 storage 中 保存 日 
期 数据 和 日 程 数 据 ， 这 两 个 数据 的 天 系 是 一 对 多 。 在 代码 结构 设计 
时 ， 将 代码 分 成 了 数据 操作 层 和 业务 层 。 数 据 操 作 层 需要 考虑 同业 务 
层 提 供 同 步 和 异步 的 方式 读 写 数据 的 接口 。 业 务 层 则 只 需 专 心 搞 好 页 
面 洽 染 和 用 户 交 互 即 可 。 


2) 将 复杂 的 界面 数据 模型 化 : 日 程 操作 页 的 日 程 表格 是 一 个 泻 染 
逻辑 比较 复杂 的 组 件 。 业 务 的 目的 是 形象 地 查看 每 个 日 程 的 时 间 长 
度 。 设 计时 吏 需 要 将 这 个 业务 抽象 成 为 一 个 表格 ， 之 后 思考 表格 中 的 
每 个 格子 怎么 泻 染 ， 最 后 设计 泻 染 数据 ， 保 证 以 最 简单 的 方式 达到 业 


务 的 需求 。 


第 10 章 ”案例 分 析 一 一 多 点 商城 


本 章 以 多 点 App 为 原型 ， 实 现 一 套 类 似 电 商 的 小 程序 ， 多 点 App 是 
一 款 网 上 超市 购物 软件 ， 用 户 下 单 后 可 在 2 小 时 内 送 达 。 本 案例 忽略 后 
台 逮 辑 ， 主 要 实现 多 点 App 核 心 前 端 功 能 ， 其 复杂 度 远 远 高 于 前 几 个 
案例 ， 为 了 降低 项 目 耦 合 度 、 提 高 项 目 可 维护 性 、 拓 展 性 ， 我 们 结合 
小 程序 特性 对 项 目 进 行 了 相应 的 架构 优化 ， 这 些 知 识 在 前 端 项 目 中 是 
通用 的 ， 大 家 在 学 习 过 程 中 除了 细节 技术 ， 对 前 端 项 目 架构 一 定 要 有 
清楚 的 认识 ， 本 章 将 会 站 在 更 高 的 高 度 剖 析 案 例 ， 构 建 逻辑 代码 中 一 
些 细节 我 们 将 适当 忽略 ， 学 习 过 程 中 可 以 对 比 源码 阅读 ， 源 码 git: 
https://github.com/wxapp-book/dmall.git 。 本 案例 没 使 用 ES6 语 法 ， 运 行 
源码 时 ， 不 要 勾 选 < 开 司 ES6 转 ES5? 选 项 ， 避 免 未 知 错误 。 


10.1 需求 分 析 


通 彰 电 商 网 站 按 类 型 可 以 将 页 面 分 为 2 类 ， 核 心 流程 页 面 和 辅助 功 
能 页 面 ， 如 图 10-1 所 示 。 


图 10-1 电 商 页 面 类 型 


核心 流程 页 面 一 般 按 顺序 包含 : 入 口 页 、 商 详 页 、 购 物 车 、 结 算 
页 、 文 付 页 、 文 付 状 态 页 ， 这 几 个 页 面 文 返 了 电 商 业务 最 核心 的 完整 
购买 流程 ， 无 论 什么 形态 的 电 商 网 站 ， 这 几 个 流程 (页面 ) 是 必 不 可 
缺 的 ， 只 是 在 表现 形态 上 略 有 不 同 。 页 面 流 量 从 入 口 页 到 文 付 状态 页 
呈 漏 斗 状 态 ， 所 有 的 电 商 公司 都 致力 于 提高 漏斗 转化 率 ， 提 高 支付 成 
功 的 用 户 数量 。 在 不 同 的 电 商 App 中 ， 这 些 页 面 的 表现 形式 也 不 同 ， 如 
购物 车 页 面 ， 在 大 部 分 App 中 通关 形态 是 一 个 单独 的 页 面 ， 而 在 个 别 
App 中 购物 车 也 可 能 是 一 个 弹 层 。 核 心 流程 冲 见 页 面 有 : 


-入口 页 : 入口 页 一 般 是 承接 主流 量 、 用 户 第 一 时 间接 触 的 页 面 ， 
对 性 能 、 打 开 速 度 要 求 都 比较 高 ， 电 商 App 的 首页 、 活 动 页 都 属于 入 口 
页 ， 甚 至 有 了 时 在 朋友 圈 中 直接 分 享 的 商 详 页 也 属于 入 口 页 。 入 口 页 商 
品 形态 都 比较 丰富 ， 经 党 变化 ， 基 于 这 些 特性 ， 入 口 页 通 向 都 是 灵活 
可 配 的 。 


- 商 详 页 : 商 详 页 主要 展示 商品 详情 ， 也 是 访问 量 比较 高 的 页 面 ， 
商 评 页 服务 端 通 营 会 把 一 些 第 变 的 信息 ， 如 现价 格 、 库 存 、 促 销 、 推 
存 等 信息 单独 莘 离 出 来 ， 每 次 进入 页 面 都 请 求 ， 保 证 数据 的 及 时 性 ; 
而 一 些 不 党 变 的 信息 ， 如 主 图 、 商 品名 称 、 原 价 、 参 数 规格 、 丙 品 介 
绍 等 信息 静态 化 ， 每 次 请 求 直 接 返 回 缓存 中 数据 ， 当 然 ， 针 对 这 些 不 
常 变 的 信息 ， 前 台 也 可 以 根据 情况 进行 适当 缓存 ， 减 少 后 端 请 求 压 
pa 


-购物 车 : 购物 车 页 面 用 于 存放 用 户 已 添加 的 商品 ， 在 购物 车 中 能 
对 两 品 做 简单 的 编辑 ， 如 修改 数量 ， 不 同 的 电 商 形态 对 购物 车 商品 有 
不 同类 型 的 划分 ， 有 些 按 店 铺 划 分 ， 有 些 按 业 务 形态 划分 。 


结算 页 : 结算 页 主要 用 于 用 户 核实 商品 信息 ， 填 写 收 货 地 址 、 配 
送 方式 、 收 货 时 间 等 ， 除 商品 信息 外 和 购买 有 关 的 其 他 信息 ， 绪 算 页 
一 般 不 允许 修改 商品 信息 ， 因 为 在 结算 页 中 ， 后 台 会 根据 用 户 选 择 的 
商品 配合 促销 规则 、 配 送 规则 等 实时 计算 出 文 付 价格 ， 如 果 结 算 商品 
不 断 变 化 会 给 后 台 造 成 很 大 压力 ， 当 然 有 些 电 商 也 在 竹 试 将 购物 车 和 
结算 从 交互 上 进行 一 定 程度 的 融合 ， 毕 竟 在 电 商 网 站 中 ， 少 一 次 页 面 
跳 转 束 会 缩短 文 付 路 径 ， 提 升 用 户 转 化 率 。 


文 付 页 : 支付 页 用 于 用 户 选 择 支 付 方 式 ， 它 负责 对 接 目 己 或 第 3 
方 的 文 付 系 统 ， 让 用 户 以 最 便捷 的 方式 完成 文 付 。 


文 付 状 态 页 : 文 付 状态 页 告知 用 户 当 前 文 付 结 采 ， 同 时 一 些 文 付 
状态 页 也 承担 部 分 引流 工作 。 


辅助 功能 页 面 相对 比较 多 且 没 有 一 个 固定 的 模式 ， 通 前 不 同 的 电 
商 公司 根据 目 身 提供 的 服务 创建 不 同 的 辅助 功能 页 面 ， 而 这 些 辅助 功 
能 页 面 提 供 的 服务 恰恰 是 每 个 电 商 App 差 异化 所 在 ， 如 一 些 020 电 商 网 
站 ， 地 址 是 很 核心 的 一 个 系统 ， 进 入 App 首 先 必须 定位 ， 然 后 根据 定位 
言 尽 获 取 周 边 服 务 ， 而 一 些 B2C 电 两 App 对 地 址 则 不 是 太 强 化 ， 只 有 在 


下 单 时 才 会 让 用 户 填写 地 址 ， 这 两 种 方式 各 有 优 务 ， 总 之 ， 辅 助 功 能 
页 面 和 电 商 公司 目 身 业务 、 形 态 忍 轧 相 天， 它们 的 存在 是 为 了 结合 ， 
务 更 好 地 证 用 户 完 成 核心 购买 流程 ， 提 高 漏斗 转化 率 。 辅 助 功能 页 面 
按 类 型 划分 有 如 下 几 种 : 


登录 相关 页 面 : 登录 相关 页 面 通常 包 售 登录 页 、 注 册页 、 密 码 找 
回 等 功能 性 页 面 ， 它 们 负责 用 户 整 体 登 录 仿 创建 与 维护 ， 通 常 一 个 公 
司 旗 下 挛 品 会 共用 一 套 登 录 仿 ， 如 腾讯 、 淘 宝 ， 甚 至 现在 在 不 同 平台 
也 能 共用 登录 仿 ， 如 QQ、 微 信 、 微 博 的 第 三 方 平台 登录 ， 如 末 一 个 公 
司 目 己 维护 用 户 信 息 ， 前 后 端 一 定 要 做 好 安全 方面 的 工作 。 


-商品 检索 相关 页 面 : 一 般 分 类 、 搜 索 都 属于 商品 检索 页 面 ， 它 能 
将 商品 按 用 户 更 容易 理解 的 纬度 更 直接 的 呈现 给 用 户 。 


地址 相关 页 面 : 地 址 相关 页 面包 含 定 位 、 地 址 列表 、 地 址 详情 、 
地 址 修改 等 和 地 址 信息 维护 相关 页 面 ， 不 同 的 公司 有 不 同 的 组 织 
= 


订单 相关 页 面 : 订单 相关 页 面包 含 ， 订 单列 表 、 订 单 详情 等 页 
面 ， 在 订单 相关 页 面 中 ， 我 们 能 了 解 当前 订单 的 状态 ， 同 时 可 以 对 订 
单 进行 相应 的 操作 ， 如 取消 、 再 次 购买 等 ， 订 单 按 类 型 、 状 态 可 被 拆 
为 多 种 形态 ， 如 按 类 型 可 划分 为 020 订 单 、B2C 订 单 、 海 淘 订 单 等 ， 


按 状态 可 划分 为 待 文 付 、 待 收 货 、 已 完成 〈 历 史 订 单 ) 等 ， 不 同 的 公 
司 有 不 同 的 拆 分 方式 。 


-个 人 中 心 相 关 页 面 : 个 人 中 心 页 面包 含 用 户 信息 、 权 巷 、 会 员 特 
权 等 页 面 ， 不 同 用 户 所 享有 的 权限 、 服 务 是 不 一 样 的 ， 每 个 公司 所 提 
供 的 服务 也 不 一 样 ， 所 以 个 人 中 心 根据 业务 不 同 有 各 种 不 同 的 形态 ， 
但 整体 上 订单 、 地 址 修改 、 个 人 信息 等 入 口 都 会 放置 在 个 人 中 心目 
pa 


~ 


根据 上 述 电 商 常见 页 面 ， 结 合 多 点 App 业 务 形态 ， 本 章 实例 实现 
了 : 首页 、 活 动 页 、 分 类 页 、 搜 索 页 、 购 物 车 、 结 算 页 、 文 付 页 、 文 
付 状 态 页 、 个 人 中 心 页 ， 根 据 交 互 要 求 ， 我 们 使 用 底部 导航 将 首页 、 
分 类 、 购 物 车 、 用 户 中 心 整合 为 一 级 页 面 让 用 户 能 直接 触 达 ， 同 时 活 
动 页 和 首页 都 通过 楼 层 搭 建 的 方式 实现 ，App 部 分 界面 如 图 10-2 所 示 。 
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加 入 购物 车 


10.2 ”技术 架构 


在 豆 锥 电影 实例 中 ， 我 们 为 大 家 展示 了 通用 的 代码 架构 方式 ， 本 
项 目 在 代码 架构 上 和 豆 瓣 电影 项 目 基本 一 致 ， 具 体 细 世 我 们 就 不 再 歼 
述 ， 主 要 讲解 一 些 架 构 上 的 差异 与 重点 ， 本 案例 架构 如 图 10-3 所 示 。 


| | 
I 1 | 
L 


图 10-3 多 点 商城 架构 


10.2.1 主 界面 架构 


相 比 豆 狼 电影 ， 多 点 商城 界面 中 多 了 一 个 views 目 好 ， 这 个 目 用 
于 存放 主 界 面 的 4 个 视图 ， 以 及 搭建 活动 时 所 需 的 楼 层 模板 。 多 点 商城 
主 界面 参见 匈 10-4， 通 过 撒 部 导航 实现 跳 八 ， 点 击 帮 部 导航 分 别 跳 首 
页 、 分 类 、 购物 车 、 个 人 中 心 ， 虽 然 小 程序 提供 了 tabBar 配 置 ， 但 是 这 
个 tabBar 相 对 比较 简单 不 能 满足 完整 的 业务 需求 ， 如 小 程序 tabBar 边 框 
颜色 只 有 日 色 和 黑色 ， 高 度 、 大 小 不 能 控制 ， 同 时 在 交互 中 ， 购 物 车 
图 标 上 需要 显示 目前 购物 车 商品 数量 ， 这 些 都 是 tabBar 无 法 实现 的 ， 所 
以 我 们 决定 实现 一 个 自 定 义 tabBar， 并 将 相关 页 面 以 模板 形式 放置 在 


views 中 进行 管理 。 


我 们 目 定 义 tabBar 的 思路 是 通过 fixed 布 局 ， 在 底部 固定 一 个 
<view/>， 通 过 template 实 现 不 同 的 页 面 ， 点 击 不 同 bar 时 ， 调 用 相应 的 
页 面 模板 结合 相应 的 业务 数据 进行 泻 染 ， 在 桑 露 数据 接口 时 ， 我 们 和 定 
义 了 统一 的 数据 结构 格式 ， 把 业务 数据 封 玫 在 data.currentData 中 传递 给 
视图 层 ， 这 样 保 证 调用 模板 的 代码 一 致 ， 主 界面 大 致 结构 如 图 10-5 所 
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图 10-5” 主 界面 实现 思路 


主 界 面具 体 代 码 细 广 将 在 后 文中 进行 分 析 。 


10.2.2 ”业务 逻辑 层 


在 豆 辩 电影 中 我 们 也 创建 了 业务 逻辑 层 ， 但 实例 业务 比较 人 简单 ， 
大 家 可 能 没 能 感觉 到 业务 逻辑 层 的 必要 性 ， 反 而 影响 了 代码 可 读 性 。 
而 在 多 点 商城 中 ， 由 于 不 同 的 页 面 可 能 会 调用 同一 个 接口 ， 这 时 接口 
层 在 解 而 代码 、 减 少 代码 量 上 都 显得 尤为 重要 。 本 例 中 我 们 创建 了 cart 
和 items 两 个 services，cart 实 现 了 add、get 两 个 方法 。get 方 法 为 主 界面 
tabBar、 商 品 详情 提供 购物 车 数量 查询 服务 ; add 方法 为 首页 、 商 品 详 
情 页 、 分 类 页 提供 添加 购物 车 服务 ，items 实 现 了 search、getDetail 两 个 
方法 ，search 为 分 类 、 搜 索 页 提供 商品 查询 服务 ，getDetail 为 商品 详情 
页 提供 获取 商品 详情 服务 。 在 和 案例 中 ， 我 们 仅仅 做 了 services 层 的 应 用 
展示 ， 并 没有 完全 实现 相关 接口 和 代码 ， 业 务 逻 辑 层 结构 如 图 10-6 所 


小? 


图 10-6 ”业务 逻辑 层 


在 services/cartcart.js， 由 于 没有 后 台 接 口 ， 我 们 直接 在 本 地 模拟 
购物 车 数量 ， 代 码 如 “代码 清单 10-1”。 


代码 清单 10-1 ”业务 逻辑 层 


var ajax = require( '../../common/ajax/ajax.js' )， 
simularNumber = 12, 
handle; 

handle = 


{ 
// 添加 购物 车 
add : function( storeId, skuId, num, callback ) { 
ajax.query( { 
Url : 'https://www.dmall.com', 
param : 
StoreId : StoreId， 
SkuId : skuId, 
num : num 


}, 
callback : function() { 


// 模拟 递增 购物 车 数量 

++SimularNumber; 

callback( { 
errCode : '0000'， 


errMsg : "', 
data : { 
num : simularNumber 
} 
} ); 
} 
} ) 
}, 


// 获取 购物 数量 
get : function( callback ) { 
ajax.query( { 
url : 'https://www.dmall.com', 
param : {}, 
callback : function() { 
// 返回 模拟 数据 
callback( { 
errCode : '0000'， 


errMsg : "', 
data : { 
num : simularNumber 
} 
} ); 
} 
} ) 
} 


} 


module.exports = handle,; 


在 services/items/items.js 中 ，search 方 法 返回 的 数据 是 商品 列表 ， 
这 个 数据 的 本 地 模拟 数据 在 services/items/data.js 中 ，getDetail 则 直接 调 
用 回调 方法 ， 由 商 详 页 面 模拟 返回 数据 ， 代 码 如 下 : 


var ajax = require( '../../common/ajax/ajax.js' )， 
data = require( 'data.js' )， 
handle,; 

handle = { 


search : function( param, callback ) { 
ajax.query( { 

Url : 'https://www.dmall.com', 

param : param, 

callback : function( res ) 区 
// 直接 将 返回 数据 透 传 给 上 层 业 务 
// 由 上 层 业 务 根据 错误 码 判 断 该 进行 如 何 交互 
callback( data ); 


} 
} ); 
}, 
getDetail : function( param, callback ) { 


ajax. query( { 
Url : 'https://www.dmall.com' 
param : param, 
callback : function( res ) { 
callback( res ) 


} 
} ); 
} 
} 


module.exports = handle; 


在 业务 逻辑 层 中 我 们 除了 提供 业务 接口 ， 也 可 以 对 服务 端 返回 数 
据 做 相应 过 减 ， 比 如 后 合 错误 码 通常 是 有 侣 义 的 ， 我 们 可 以 跟 进 这 些 
制定 错误 码 ， 将 返回 数据 过 滤 为 上 层 业 务 所 需 的 了 字段， 如 跳 转 链接 、 
跳 转 方 式 、 提 示 信 息 等 ， 这 是 一 种 思路 ， 具 体 实 现 没 有 统一 规范 ， 大 
家 可 根据 项 目 实际 情况 选择 合适 的 实现 方式 。 


10.2.3 ”代理 网 络 请 求 接口 


客户 端 常常 需要 同 后台 进 行 交 互 ， 我 们 在 小 程序 网 络 API 基 础 上 进 
行 了 再 次 封 朔 ， 实 现 了 一 个 网 络 请 求 的 代理 方法 ， 主 界面 实现 思路 如 
图 10-5 所 示 ， 所 有 网 络 请 求 相关 方法 都 封装 在 common/ajax/ajax.js 文 件 
中 ， 这 样 做 的 原因 有 3 点 : 


. 解 硝 底层 代码 。 上 层 业 务 无 需 关 心 异步 请 求 调用 方式 ， 底层 可 以 
随时 根据 情况 统一 修改 请 求实 现 方式 。 


“针对 目 己 项 目 格 式 化 请 求 、 返 回 参数 ， 统 一 上 游 业 务 代码 调用 方 
式 ， 当 需要 切换 网 络 请 求实 现 方式 ， 或 添加 一 些 系统 级 别 请 求 参数 
时 ， 如 用 户 信 息 、 坐 标 信息 等 ， 我 们 可 以 在 代理 方法 中 实现 。 


-对 网 络 请 求实 现 拦 截 。 一 些 系统 级 别 的 错误 码 可 以 在 这 个 代理 层 
做 统一 的 行为 处 理 ， 如 用 户 未 登录、 未 授权 、 后 台 服 务 宕 机 等 。 


在 前 只 项 目 中 代理 网 络 请 求 十 分 有 必要 ， 在 封 猴 请 求 参数 时 ， 我 
们 也 应 该 更 多 考虑 整个 系统 的 接口 解 耕 ， 在 过 去 网 络 端 后 人 台 通 单 会 
接 读 取 cookie 中 某 些 字段 判断 用 户 登 隶 仿 ， 而 如 条 一 个 公司 产品 既 有 
App 又 有 H5， 那 么 这 样 的 接口 在 App 中 无 法 使 用 ， 所 以 我 们 建议 将 
cookie 或 其 他 存储 中 的 参数 通过 前 响 取 值 后 赋值 在 请 求 参 数 中 进行 统一 
管理 ， 这 样 能 实现 后 台 的 解 厢 ， 无 论 前 人 台 技 术 怎 样 实 现 ， 有 无 cookie， 


后 台 接 口 都 能 支持 调用 ， 而 这 类 统一 参数 的 封装 ， 便 可 在 代理 网 络 请 
求 接口 中 实现 ， 实 现 原理 如 图 10-7 所 示 。 


图 10-7 ”代理 网 络 请 求 接口 
common/ajax/ajax.js 文 件 代 码 如 下 : 


var handle, 
= ne 


handle = { 
/* 统一 请 求 接口 */ 
guery : function( object ) { 
wx.request({ 
url : object.url, 
data : object.param, 
method : 'get', 
success : function( res ) { 
_fn.responsewrapper( res, object.callback ); 


fail : function( res ) { 


} 
}); 
} 
} 
_fn={ 


_fn.responsewrapper( res, object.callback ); 


responsewWrapper : function( res, callback ) { 
数 《 


// 对 请 求 失败 ， 


寺 装 统一 返 世 


Hh 


工 
// 保证 上 层 业 务 只 传 入 一 个 回调 方法 ， 简 化 请 求 API 


if ( 


Ires || res.statusCode != 200 ) { 


callback( { 


errCode : -1, 
errMsg : ' 网 络 问 题 '， 
data : {} 


// 
if ( 
// 


return; 


} 
if ( 
// 


些 特殊 登录 统一 拦截 ， 如 未 登录 等 情况 
res.data.errCode == 12341234 ) { 
跳 转 到 登录 页 


typeof callback == 'function' ) { 
正常 回调 ， 过 滤 小 程序 返回 对 象 


callback( res.data ); 


} 
} 


module.exports = handle; 


狼 


A 


handle = 


search : 
ajax. 
Url : 


务 层 (services) 调用 请 求 代码 如 下 ， 


{ 

function( param, callback ) { 
query( { 
'https://www.dmall.com', 


param : param, 
callback : function( res ) { 
// 直接 将 返回 数据 透 传 给 上 层 业 务 


// 


Fr 


层 业 务 根据 错误 码 判 断 该 进行 如 何 交 互 


callback( res ); 


} 
} ); 


传 入 的 回调 方 


法 只 


有 二 


10.2.4 本 地 模拟 接口 数据 


目 从 Web 项 目 推 委 前 后 端 分 离 以 来 ， 大 大 提高 了 项 目 整体 开发 效 
率 ， 而 小 程序 这 种 开发 模式 默认 束 是 前 后 端 分 离 的 形式 ， 针 对 这 种 前 
后 端 分 离 的 项 目 ， 前 端 开发 通常 会 在 本 地 模拟 一 份 接 口 数据 格式 。 当 
前 后 两 端 各 自 调 试 完毕 以 后 ， 直 接 修改 services 接 口 ， 去 掉 数 据 注入 代 
码 ， 便 能 直接 对 接 后 台 接 口 ， 大 大 减少 了 前 后 端 开发 过 程 中 不 必要 的 
沟通 。 在 本 案例 中 ， 我 们 基本 将 模拟 数据 data.js 保 存在 页 面目 录 中 ， 
如 图 10-8 所 示 。 这 样 我 们 在 编写 视图 层 和 逻辑 层 代 码 时 ， 可 以 随时 根 
据 需 求 修改 数据 格式 ， 如 pages/active/data.js，pages/cashier/data.js， 
views/cart/data.js 等 ， 当 然 也 可 以 将 这 些 模 拟 数据 放置 在 不 同 servcie 目 
录 中 ， 大 家 在 开发 前 端 项 目 过程 中 ， 一 定 要 尽 可 能 使 用 这 种 本 地 模拟 
数据 的 方式 。 


FOLDERS 
demo 
Pb common 
Pb pages 
Bb service 
Vlewws 
军 ca 
cat js 
cart.wxml 


Calt ,Wxss 


Bb home 
BE mine 


Bb modules 
Bb sort 

Bb widgets 
日 PP Js 
appJson 


app.Wxss 


图 10-8 本 地 模拟 接口 数据 


10.2.5 widgets 


widgets 与 common 层 都 是 为 项 目 提供 一 些 公 共 的 资源 ， 不 同 之 处 在 
于 ，widgets 更 多 偏向 一 个 完整 的 UI 组 件 块 ， 比 如 下 拉 选 择 框 、 弹 层 
框 、 搜 索 框 等 ，common 通 常 是 一 些 公共 的 方法 集合 ， 没 有 相应 的 UI 
屋 ， 在 本 案例 中 ， 我 们 将 分 类 页 和 搜索 页 的 搜索 框 、 商 品 列表 抽象 成 
widgets， 如 图 10-9 所 示 。 


在 小 程序 中 由 于 数据 模型 、 事 件 绑 定 都 是 在 小 程序 页 面 文件 中 进 
行 ， 我 们 虽然 可 以 将 widgets 代 码 文件 进行 物理 隔离 ， 但 真正 对 项 目 进 
行 组 件 化 有 一 定 难 度 。 在 本 案例 中 我 们 尝试 了 多 种 剥离 方式 ， 对 于 
widgets 的 剥离 ， 我 们 尝试 仅仅 剥离 UI 屋 ， 并 没 对 逻辑 层 进行 剥离 ， 在 
列表 页 、 搜 索 页 引入 模板 泻 染 时 ， 需 要 传 入 对 应 的 事件 方法 名 称 ， 而 
具体 的 事件 实现 则 是 在 列表 页 、 搜 索 页 目 己 的 逻辑 层 中 实现 。 而 且 有 
个 细节 需要 注意 ， 按 照 交 互 要 求 ， 在 列表 页 中 点 击 搜索 框 时 需要 跳 转 
到 搜索 页 ， 在 搜索 页 searchbox 失 去 焦点 时 需要 根据 用 户 输入 搜索 商 
品 ， 所 以 我 们 对 于 这 两 个 wedgets 仅 仅 做 了 UI 层 的 解 耘 ， 而 实际 项 目 中 
是 否 要 采用 这 种 解 耘 方式 ， 还 需要 根据 实际 项 目 而 定 ， 本 示例 仅 作 展 
示 。 我 们 以 searchbox 为 例 ， 代 码 如 下 : 
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图 10-9 wigets 


<template name="search-box"> 
<view class="search-box"> 


<!-- 绑 定 调用 页 面 传 入 的 tapEvent 方 法 名 --> 
<view class="box-cont" bindtap="{{tapEvent}}"> 


<icon class="icon search"/> 


<view class="input" wx:if="{{!showInput}}"> 搜 索 多 点 超市 商品 </view> 


<!-- 绑 定 调用 页 


超市 商品 " bindblur="{{blurEvent}}"/> 
</view> 
</view> 
</template> 


硬 传 入 的 blurEvnt 方 法 名 
<input class="input" wx:else auto-focus="{{autoFocus}}" placeholder=" 搜 


= 


索 多 点 


在 调用 searchbox 模 板 时 ， 我 们 需要 将 对 应 的 tapEvent、blurEvent 事 


件 通过 参数 传递 给 模板 ， 


达到 同一 模板 在 不 同 页 面具 备 不 同 交 互 的 效 


条 ， 这 种 方式 更 加 依赖 模板 参数 接口 ， 每 个 调用 页 面 都 必须 实现 对 应 
的 方法 ， 后 面 10.3.2 方 楼 层 搭建 代码 中 ， 我 们 采用 了 男 外 一 种 方式 ， 读 
者 看 完整 个 案例 后 可 以 对 比 两 种 实现 方式 的 优 劣 。 


10.2.6 ”全 局 样式 控制 


在 项 目 样式 管理 中 ， 我 们 将 一 些 公共 样式 ， 如 icon、 默 认 轮 播 
、 系 统 样式 复写 剥离 到 common/basestyle/basestyle.wxss 文 件 中 ， 在 
app.wxss 文 件 引 用 basestyle.wxss 文 件 ， 每 个 样式 放置 在 .base-style 类 选 
择 絮 下 ， 如 以 下 代码 所 示 : 


.base-style .icon.bar { background-image: url(http://static,.dmall.com/kayak- 
project/wxdmall/dist/wxdmall/common/image/btm-bar-sprt.png); background-size: 
500rpx auto; } 


/* tabbar 图 标 */ 

base-style .icon.bar.home { background-position: 0 0; } 

.base-style .icon.bar.home.current { background-position: © -100rpx; } 
.base-style .icon.bar.sort { background-position : -100rpx 0; } 

base-style .icon.bar.sort.current { background-position: -100rpx -100rpx; } 
base-style .icon.bar.cart { background-position: -300rpx 0; } 

.base-style .icon.bar.cart,.current { background-position: -300rpx -100rpx; } 
base-style .icon.bar.mine { background-position : -400rpx 0; } 

.base-style .icon.bar.mine.current { background-position: -400rpx -100rpx; } 


在 使 用 时 需要 在 构建 代码 外 层 添加 类 选择 占 ， 如 下 所 示 : 


<view class="details base-style"> 
<view class="slider"> 


</view> 

<view class="info"> 

</view> 

<view class="spec info-module"> 
</view> 

<view class="more info-module"> 
</view> 


<view class="toolbar"> 


</view> 
</view> 


采用 这 种 方式 能 将 公共 的 样式 代码 剥离 到 同一 文件 统一 管理 ， 同 
时 在 项 目 整体 切换 风格 时 ， 我 们 可 以 按 类 似 方法 创建 男 一 个 样式 文件 
和 窗 主 原 有 类 选择 絮 或 新 建 类 选择 器， 修改 对 应 页 面 的 class 属 性 ， 或 将 
页 面 base-style 封 装 为 数据 注入 ， 这 样 便 可 做 到 修改 一 处 便 整 体 切换 页 
面 风格 。 这 种 方式 同时 适用 一 些 系 统 换 肤 的 功能 。 


10.3 ”页 面 实 现 


上 面 讲解 了 多 点 商城 项 目 主要 架构 和 项 目 中 的 一 些 核 心 难点 ， 本 
小 节 讲 解 页 面 实现 过 程 中 一 些 核心 技术 和 思路 ， 如 在 首页 与 活动 页 
中 ， 我 们 使 用 了 楼 层 搭建 的 方式 动态 创建 页 面 ， 在 其 余 一 些 页 面 中 ， 
我 们 尝试 了 多 种 解 夺 方式。 这 些 编码 思路 没有 绝对 的 好 与 不 好 ， 

适 与 不 合适 ， 在 实际 项 目 中 一 定 要 根据 项 目 实际 情况 进行 合理 选 
择 ， 避 免 过 度 架 构 。 


10.3.1 主 界 面 实现 


主 界面 index 中 包含 了 一 个 tabBar 和 4 个 界面 : 首页 、 分 类 、 购 物 
车 、 个 人 中 心 ， 如 图 10-10 所 示 。 


上 午 12:49 
- 网 上 好 超市 


AN 


‘i2 和 2 


NE 


12.9 20: :00 正 式 开户 
下 单 即 抽 iPhone 7 PIUS 


ee 


TOP 榜 满 99 减 50 7 折 区 美 通 卡 


- 每 日 推荐 - 。 优 污 爆 品 0 点 换 新 @ 


Mixxtail 魅 夜 专业 。” 曼 可 顿 面包 香 苞 康师傅 蜂蜜 绿茶 
鸡尾酒 蓝 色 幻 … 牛奶 味 68g 500ml 


¥8.00 十 | ¥1.65 十 | | y2.50 


图 10-10” 主 界面 


这 4 个 页 面 整体 染 构 思路 在 技术 架构 中 进行 了 介绍 ， 这 里 主要 介绍 
主 界面 实现 细节 。 主 界面 代码 在 pages/index 目 录 中 ， 首 页 、 分 类 、 购 物 
车 、 个 人 中 心 界 面 分 别 单 独 刊 离 到 views/home、Views/sort、 
views/cart、views/mine 目 录 中 ， 在 主 界面 文件 中 我 们 需要 分 别 引 入 4 个 
view 对 应 的 js、wxml、wxss 文 件 ， 在 每 个 view 中 必须 实现 render 方 法 。 
在 tab 切 换 时 会 调用 对 应 view 的 render 方 法 。 要 注意 的 是 ，view 目 录 中 吕 
然 有 js、wxml、wxss 三 个 文件 ， 但 它 并 不 是 小 程序 页 面 ， 仅 仅 是 按 模 
块 化 规则 将 代码 进行 了 解 奈 ， 所 以 view 中 js 是 没有 data 对 象 的 ， 也 不 能 
在 页 面 逻 辑 中 直接 调用 this.setData () 方法 ， 所 以 在 调用 对 应 view 的 
render 方 法 时 ， 我 们 将 当前 页 面 对 象 作为 参数 传递 给 对 应 view 的 render 
方法 。 代 码 片 段 见 代码 清单 10-2。 


代码 清单 10-2” 主 界面 实现 


// 注册 当前 页 面 对 应 js 
Views = { 
home : home, 
sort : sort, 
cart : cart, 
mine : mine 


} 
Page( { 
data : {..}, 
onReady : function( ) { 
/ 加 载 时 默认 选中 首页 


fn.selectView.call( this, 'home' ); 


onShow : function() { 
// 每 次 显示 都 刷新 一 次 购物 车 
// 这 样 保证 在 商 详 添加 后 在 首页 也 能 显示 
var self = this; 
serviceCart.get( function( res ) { 
self.setData( { 


'cart.num' : res.data.num 
} ); 
} ); 


}, 
// 绑 定 到 视图 层 切 换 tab 页 面 方法 
changeTab : function( e ) 
var currentTarget = e.currentTarget, 
View = currentTarget.dataset .view; 
if ( !View ) { return; } 
// 调用 对 应 的 view 
_fn.selectView.call( this, view ); 
} 
} ); 


_fn={ 
selectView : function( view ) { 
var View = views[view]; 
if ( !Iview ) { 
return; 


// 调用 对 应 的 render 方 法 , 并 将 当前 页 面 作为 参数 传递 给 对 应 模块 
view.render( this ); 


在 每 个 view 中 需要 实现 render 方 法 ，render 方 法 必须 实现 两 个 逻 
辑 : 1) 设置 当前 页 面 数据 currentView 和 currentData， 触 发 泻 染 ，2) 在 
当前 页 面 对 象 中 绑 定 当前 view 所 需 事件 。 这 样 每 个 view 在 研发 过 程 
中 ， 可 以 单独 在 目录 中 创建 自己 的 模拟 数据 、 事 件 对 象 ， 在 多 人 开发 
时 不 用 都 修改 index.js 文 件 ， 达 到 解 灰 目的。 在 事件 绑 定 时 ， 为 了 避免 
事件 冲突 ， 事 件 名称 是 view 名 + 方法 名 ， 如 sortChangeSort (分 类 view 中 
切换 分 类 tab 选 项 ) 以 分 类 为 例 ， 代 码 见 代码 清单 10-3。 


代码 清单 10-3 ” 演 染 的 实现 


var handle, events,...,; 


handle = { 

// callerPage 为 jndex Page 对 象 

render : function( callerPage ) { 
// 初始 化 界面 
_fn.init( callerPage ); 
// 设置 搜索 框 数据 
data.data.searchBox = {...} 
// 设置 页 面 所 需 数据 
callerPage.setData( { 


currentView : 'sort', 
currentData : data.data 
} ); 
// 选中 第 几 个 分 类 tab 
_fn.select( 0，callerPage ); 


} 
}; 


// 需要 绑 定 到 index, js 的 事件 方法 
events = { 
SortChangeSort : function( e ) {...}, 
SortGotoSearch : function( e ) {...}, 
sortclickProxy : function( e ) {...} 


init : function( callerPage ) { 
// 如 果 已 经 初始 化 则 不 需要 再 次 触发 ， 避 免 事件 重复 merge 
if ( callerPage,initedSort ) { 
return; 


// 将 事件 绑 定 到 index 页 面 还 辑 层 
utils.mix( callerPage，events ); 
callerPage.initedSort = true; 


}, 
// 选中 对 应 分 类 
select : function( index, callerpPage ) {...}, 
// 添加 购物 车 
addCcart : function( e, callerPage ) {...} 

} 


module.exports = handle; 


主 寞 面 渔 染 流 程 整 体 如 图 10-11 所 示 。 


在 index 模 型 中 ，currentData 永 远 指 癌 当 前 view 所 对 应 的 数据 模型 ， 
事件 方法 中 ， 可 以 通过 修改 当前 currentData 而 修改 当前 界面 ， 在 开发 过 
程 中 可 以 在 本 地 模拟 sort 数 据 模型 ， 等 前 后 台 工 作者 开发 完毕 后 ， 直 接 
对 接 后 台 接 口 。 


mine.wxml 
<template/> 


= 
| 
亏 演 染 对 应 template 
: 人 于 TPR 一 一 
index.wxml 人 Nm me | 
一 一 用 户 选 择 tab index 数据 模型 sort 数据 模型 


将 index 数据 模型 currentData 属性 指向 
sort 数据 模型 ， 并 调用 setData() 


找到 对 应 view 并 
执行 render 方法 


后 台 交 互 本 例 未 实现 


图 10-11 主 界 面 泻 染 流程 


10.3.2 ”首页 与 活动 页 


首页 与 活动 页 的 示例 如 网 10-12 所 示 。 


首页 与 活动 页 由 于 常 和 变动， 我 们 可 以 通过 搭建 楼 层 方式 实现 。 
在 前 端 项 目 中 这 种 动态 搭建 页 面 的 技术 已 经 十 分 成 熟 ， 本 案例 中 楼 层 
搭建 通过 模板 实现 。 每 一 个 楼 层 存 放 到 一 个 模板 中 ， 演 染 时 ， 裔 历数 
据 模型 列表 ， 根 据 每 个 数据 模型 类 型 ， 找 到 对 应 模板 进行 泻 染 ， 本 案 
例 中 首页 和 活动 页 部 十 采用 这 种 楼 层 泻 染 方案 ， 流程 如 图 10-13 所 示 。 
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图 10-13 ”首页 泻 染 流程 


所 有 楼 层 模板 类 型 存放 在 views/modules/modules.wxml 文 件 中 ， 
个 楼 层 对 应 的 0 中 ， 在 泻 染 楼 层 页 面 
时 ， 除 了 引入 楼 层 模板 ， 还 需要 将 modules.js 中 的 事件 合并 到 页 面 对 象 
上 上 。modules.wxml 中 我 们 定义 了 5 类 楼 层 ， 轮 播 图 模块 、 入 口 模块 、 商 
品 列 表 模 块 、 左 右 混搭 楼 层 模 块 、 并 排 图 片 模 块 ， 代 码 整体 结构 如 
h 


轮 播 图 模块 - 
了 a 
<view class="slider"> 


</view> 
</template> 


<!-- 入 口 模块 --> 
<template name="entry"> 
<view class="entry"> 


</view> 
</template> 
<!-- 商品 列表 --> 
<template name="module-1"> 
<view class="module-1 flex-col"> 


</view> 
</template> 
<!- - 左右 楼 层 混搭 --> 
<template name="module-2"> 
<view class="module-2 flex-col"> 


</view> 
</template> 
<!-- 并 排 图 片 - -> 
<template name="module-3"> 


<view class="module-3 flex-col" style="height: 
{{data[0] .height/data[0] .width*750/data.length}}rpx;"> 


</view> 
</template> 


以 首页 为 例 ，modules 数 组 中 对 应 当前 楼 层 的 顺序 ， 每 个 楼 层 包 
两 个 属性 type 和 data，type 值 为 nodules.wxml 中 对 应 楼 层 模板 name 值 ， 


data 为 对 应 模板 所 需 数据 ， 页 面 数据 模型 如 下 : 


data : { 

modules : [{ 
// 轮 播 图 模块 
type 'slider', 
data Ei 

}1{ 
// 入 口 模块 
type 'entry', 
data Ex ] 

}14 
// 并 排 图 片 模块 
type 'module-3', 
data Ei] 


{ 
// 商品 列表 模块 
type : 'module-1', 


// 左右 混搭 楼 层 模块 
type : 'module-3', 


// 并 排 图 片 模块 
type : 'module-3', 
data : [...] 


{ 
// 商品 列表 模块 


data : [...] 


根据 这 个 模型 ， 首 页 仪 需 遍历 modules， 调 用 对 应 模板 进行 泻 染 即 
可 ， 代 码 如 下 : 


<!-- 导入 楼 层 模板 --> 
<import src="../modules/modules .wxml"/> 


<template name="home"> 
<view class="Vview-home modules"> 
<!-- 闹 历 楼 层 --> 
<block wx:for="{{modules}}"> 
<!-- 调用 对 应 模板 --> 
<template is="{{item.type}}" data="{{...item, index}}"></template> 
</block> 
</view> 
</template> 


活动 页 面 实现 和 首页 类 似 ， 唯 一 不 同 的 是 modules 数 据 不 一 样 。 上 
文 代码 仅仅 解决 了 楼 层 视 图 层 泻 染 的 问题 ， 在 实现 过 程 中 ， 每 个 楼 层 
具备 目 己 的 事件 ， 比 如 商品 列表 中 有 添加 购物 车 事件 ， 为 了 便于 管 
理 ， 我 们 将 楼 层 本 吴 的 事件 封闭 在 modues.js 中 ， 调 动 楼 层 模 板 时 ， 
要 将 楼 层 对 应 的 方法 合 
定义 两 个 事件 : 


Var utils = require( ' 
serviceCart = require( ',../../service/cart/cart.js' ), 
handle; 


events, 


handle = { 
4 


/ 楼 层 对 应 事件 


events : 


// 添加 购物 车 
modulesAddCart 


// 轮 播 图 切换 


modulesSliderChange : 


} 


module.exports = handle; 


并 到 相应 的 页 面 对 象 中 ， 如 本 案例 modules.js 已 


./../common/utils/utils.js' )， 


: function( e ){...}, 


function( e ){...} 


调用 页 面 时 需要 将 事件 添加 到 页 面 对 象 中 : 


// 引入 modules 


var modules = require( '. 


handle = { 


./../Vviews/modules/modules.js' )， 


render : function( callerPage ) { 
_fn. init( callerPage ); 


// 请 求 数据 ， 泻 


yez 3 人 L 米 


callerPage.setData( { 


currentView : 
currentData : 


} 
_fn={ 


'home', 
data.data 


init : function( callerPage ) { 
If ( callerPage.initedHome ) { 


return; 


} 
// 将 楼 层 寻 


Wp 


件 


添加 到 页 画 


EH 


utils.mix( callerPage, modules.events ); 


} 
} 


module.exports = handle; 


楼 层 搭建 的 思路 比较 适合 手机 ， 由 于 屏幕 尺寸 和 使 用 习惯 关系 ， 
手机 应 用 的 界面 都 可 以 拆 分 为 不 同 楼 层 ， 而 对 于 一 些 大 尺寸 的 设备 
(如 PC、 平 板 ) ， 动 态 搭建 页 面 时 需要 在 此 引入 栅 格 系统 ， 首 先 将 界 
面 划分 为 不 同 的 格子 ， 然 后 将 模块 放置 到 对 应 的 格子 中 ， 有 兴趣 的 同 
学 可 以 深入 研究 。 


10.33 站 闫 页 与 慢 过 页 


分 类 页 和 搜索 页 的 示例 如 图 10-14 所 示 。 


上 午 12:49 全 88% 上 午 12:50 


多 点 - 网 上 好 超市 多 点 - 网 上 好 超市 
CQ 搜索 多 点 超市 商品 


推荐 商品 po 有 达 ] 特 鲜 炼 奶 饼干 芝士 味 好 丽 友 蘑 古 力 饼 干 巧克力 味 48g 
| 9 
: | 


v12.50 a y4.40 


时 怡 蛋 圆 小 饼干 90g 韩国 富丽 加 钙 牛 奶 惹 米 饼干 300g 


Y5.90 *Y8.80 


丹麦 皇冠 牛 油 曲 奇 饼干 90g [次 日 达 ] 特 鲜 炼 奶 饼干 芝士 味 600g 


Y9.76 + Y12.50 


卡 夫 乐 之 薄片 饼干 原味 400g 


Y13.50 


好 丽 友 蘑 古 力 饼 干 巧克力 味 
48g 


Y4.40 
富丽 加 钙 牛 奶 慧 米 饼 干 300g 


#8.80 


时 怡 蛋 圆 小 饼干 90g 韩国 


Y5.90 
丹麦 皇冠 牛 油 曲 奇 饼干 90g 


*Y9.76 
卡 夫 乐 之 薄片 饼干 原味 400g 


图 10-14 分 类 页 和 搜索 页 


分 类 页 和 搜索 页 在 实现 上 本 号 没 有 什么 难点 ， 值 得 一 所 的 是 这 两 
个 页 面 中 ， 我 们 押 试 了 夯 一 种 解 耦 方式 。 在 之 前 的 项 目 中 我 们 都 是 把 


事件 方法 放置 在 对 应 js 文件 中 ， 调 用 页 面 时 需要 添加 到 当前 页 面 对 象 
中 ， 而 在 分 类 和 搜索 中 ， 因 为 同一 组 件 在 不 同 页 面 的 行为 不 一 样 ， 如 
searchbox， 在 分 类 页 面 中 按 交 互 要 求 点 击 搜索 框 直接 跳 转 到 搜索 页 ， 
在 搜索 页 点 击 搜索 框 是 输入 搜索 天 键 词 ， 所 以 我 们 仅仅 将 页 面 视图 进 
行 解 厢 ， 制 定 每 个 组 件 对 应 的 数据 模型 ， 每 个 组 件数 据 模 型 中 包含 了 
组 件 相应 行为 控制 和 有 具体 事件 实现 。 以 searchbox 组 件 为 例 ， 组 件 模 板 
中 我 们 定义 了 tapEvent 事 件 ， 代 码 如 下 : 


<template name="search-box"> 
<view class="search-box"> 
<!-- 绑 定 用 户 传 入 的 tapEvent 方 法 名 - 
<view class="box-cont" bindtap=" {ftapEvent}}"> 
<icon class="icon search"/> 
<view class="input" wx:if="{{!showInput}}"> 搜 索 多 点 超市 商品 </view> 
<!- - 绑 定 用 户 传 入 的 blurEvent 方 法 名 --> 
input class="input" wx:else auto-focus="{{autoFocus}}" placeholder=" 搜 索 多 点 
超市 商品 " bindblur="{{blurEvent}}"/> 
</view> 
</view> 
</template> 


在 调用 时 将 点 击 搜索 框 具体 事件 名 通过 tapEvent 传 入 给 searchbox， 
分 类 页 面 代码 如 下 : 


handle = { 
// callerPage 为 jndex Page 对 象 
render : function( callerPage ) { 
// 初始 化 界面 
_fn.init( callerPage ); 
// 设置 搜索 框 数据 
data. data., searchBox = { 
// 设 tapEvnet 对 [应 事件 名 
tapEvent te es 
// 不 需要 动 案 
autoFocus false, 
// ` 显 示 输 入 框 组 件 
showInput : false 


} 

// 设置 页 面 所 需 数据 

callerPage.setData( { 
currentView : 'sort', 
currentData : data.data 


} ) 


} 
}; 


// 需要 绑 定 到 index, js 的 事件 方法 
events = { 
// searchbox tapEvnet 有 具体 方法 实现 
SortChangeSort : function( e ){...}, 


init : function( callerPage ) { 


// 将 事件 绑 定 到 index 页 面 对 象 
utils.mix( callerPage，events ); 


ee 
ee 


module.exports = handle; 


在 搜索 页 中 点 击 搜 索 框 并 没有 任何 交互 ， 而 是 在 进入 搜索 框 时 ， 
searchbox 需 要 默认 聚焦 ， 在 searchbox 失 焦 时 需要 搜索 商品 ， 所 以 
searchBox 数 据 对 象 实现 代码 如 下 : 


Page( { 
data : { 
searchBox : { 
// 自动 聚焦 

autoFocus : true, 

// 显示 输入 框 组 件 

showInput : true, 

// 时 触发 搜索 

blurEvent ; 'search' 


} 
}, 
// 搜索 方法 具体 实现 
search : function( e ){...} 


} ); 


通过 上 述 方 式 ， 我 们 能 实现 同一 组 件 在 不 同 页 面 实现 不 同 交 互 的 
效 订 ， 这 仅 是 一 种 解 硝 思路 ， 而 在 实际 项 目 中 我 们 得 反思 是否 有 必要 
做 这 类 解 厢 ， 在 一 些 复 杂 度 不 高 、 代 码 量 较 小 的 页 面 ， 直 接 将 组 件 构 
建 代码 写 入 页 面 反 而 效率 更 高 。 


10.3.4 ”支付 流程 


在 通常 项 目 中 ， 支 付 流程 涉及 结算 页 、 支 什 页 、 支 付 状 态 页 ， 如 
图 10-15 所 示 。 


图 10-15 ”普通 文 付 流程 


这 几 个 页 面 需 要 做 特殊 的 栈 处 理 ， 通 常 这 几 个 页 面 访问 顺序 为 : 
用 户 首 先 访问 结算 页 ， 然 后 访问 支付 页 ， 最 后 跳 转 到 支付 状态 页 。 但 
是 在 这 种 流程 中 如 果 用 户 在 文 付 状态 页 点 击 返 回 按钮 会 导致 页 面 返回 
到 支付 页 ， 再 返回 到 结算 页 ， 而 此 时 支付 页 和 结算 页 对 应 的 订单 已 被 
处 理 ， 直 接 按 这 种 流程 返回 会 导致 页 面 报错 ， 甚 至 在 H5 项 目 中 ， 接 入 
支付 宝 之 类 的 第 3 方 文 付 ， 在 支付 页 和 支付 状态 页 之 间 有 更 长 的 支付 流 
程 ， 这 时 用 户 点 击 “ 返 回 ” 按 钮 时 会 返回 到 之 前 访问 过 的 页 面 。 同 时 在 
交互 体验 上 ， 当 支付 成 功 后 点 击 “ 返 回 * 按 钮 ， 应 该 返回 至 首页 或 结 
页 上 一 级 页 面 ， 所 以 我 们 对 此 流程 进行 了 特殊 处 理 ， 如 图 10-16 所 示 。 


购物 车 


redirectTo 


图 10-16 ”优化 后 支付 流程 


在 支付 页 支付 成 功 后 直接 返回 到 结算 页 ， 结 算 页 根据 之 前 生成 的 
订单 ， 将 当前 页 面 replace 到 文 付 状 仿 页 ， 文 付 状 态 页 根据 文 付 订单 查 
询 文 付 结 朱 并 显示 ， 这 样 ， 当 用 户 在 状态 页 点击 “返回 ”按钮 时 ， 便 能 
直接 返回 购物 车 。 在 H5 项 目 中 ， 可 以 在 结算 页 跳 转 前 调用 
history.replaceState () 方法 将 当前 栈 直 接 修 改 为 支付 状态 页 ， 这 样 支 付 
页 支付 成 功 后 束 能 直接 跳 轩 到 支付 状态 页 ， 同 时 在 支付 页 时 可 将 当前 
栈 位 置 存储 在 sessionStorage 中 ， 在 第 三 方 支付 成 功 回 调 地 址 中 判断 当 
前 栈 与 之 前 支付 页 栈 的 步 长 ， 调 用 history.back (step+1) ; 跳 转 到 结算 
页 ， 这 样 就 能 避免 用 户 点 击 返 回 时 出 现 之 前 已 访问 过 的 页 面 。 


10.3.5 “其 他 页 面 


其 他 页 面 在 实现 上 大 同 小 异 ， 在 实现 过 程 中 有 儿 个 细节 需要 注 


Re 
局 . 
/EN 。 


设计 页 面前 一 定 要 认真 思考 页 面 数据 模型 ， 好 的 数据 模型 能 大 大 


-在 小 程序 中 不 能 像 浏 览 器 一 样 直接 获取 组 件 尺 寸 ， 在 商 详 页 或 一 
些 需 要 展示 图 片 的 页 面 中 ， 可 以 让 后 全 返回 图 片 尺寸 或 调用 小 程序 
API 获 取 图 片 尺寸 ， 渔 染 时 根据 屏幕 尺寸 进行 等 比 缩放 。 


-在 客户 端 中 小 程序 页 面 整体 放置 在 一 个 view 容 右 中 ， 当 前 页 面 如 
果 高 度 不 够 时 背景 色 为 日 色 ， 这 个 容 右 确 色 是 不 能 通过 设置 json 文 件 
中 window 青 景色 改变 的 ， 所 以 在 编写 页 面 时 ， 可 以 将 当前 页 面 最 小 高 
度 设置 为 屏幕 高 度 ， 这 样 能 让 页 面 完全 填充 寞 面 。 


编写 样式 文件 时 ， 尽 量 使 用 类 选择 器 隔离 当前 样式 ， 避 免 全 局 样 
式 污染 。 


TD 2 


本 章 案 例 基 本 覆盖 小 程序 前 问 第 用 技术 ， 可 以 直接 沿用 到 任何 项 
目 中 。 在 项 目 过 程 中 我 们 壬 试 了 多 种 解 厢 方 式 ， 而 解 业 的 目的 古 为 了 
降低 项 目 风 险 ， 便 于 多 人 开发 ， 但 在 编写 多 点 商城 案例 过 程 中 ， 我 们 
也 在 反思 小 程序 的 本 质 是 什么 ? 像 商城 这 类 平台 类 型 的 产品 是 否 适 合 
做 成 小 程序 ? 小 程序 是 否 适 合 一 些 轻 量 级 的 应 用 ? 如 果 小 程序 都 是 一 
些 轻 量 级 、 功 能 性 的 页 面 ， 那 项 目的 整体 架构 是 否 可 以 适当 简化? 总 
之 ， 在 小 程序 的 道路 上 我 们 还 有 很 多 路 要 走 ， 大 家 一 起 加 油 ! 


